How to use "vuetify" transitions on my components?

Question

I'm using Vuetifyjs library in my project. I want to add transitions to my components - but there are no documentation about how to start transitions.

For example I want to add some transitions to appearance of my cards on screen.

<v-card transition="v-slide-y-transition">...</v-card>

How to start transition?

score 72 · Answer 1 · answered Jul 26 '17 at 19:15

72

This wraps some card text in a transition. When I trigger the v-show="show" model to true, the text slides in.

<v-slide-y-transition>
  <v-card-text v-show="show">
    Example text
  </v-card-text>
</v-slide-y-transition>

You could have a button trigger it or even add an onCreate() method that triggers the show to true after the component loads.

answered Jul 26 '17 at 19:15

jordanw

1,495
10
13

39

much-needed part of the documentation – ierdna Oct 20 '17 at 21:50
4

Do you know if it also possible to trigger transitions when items appear/disappear due to classes like "hidden-xs-only"? I have a component which disappears on small screens, but it would look much nicer if it would transition out of the view. – exhuma Feb 15 '18 at 06:49
_Unknown custom element: - did you register the component correctly?_ – gpasci Jan 28 '19 at 00:05
2

@gpasci You need to have the `v-` before the slide x transition, as in ``. – jordanw Jan 28 '19 at 13:32
1

Thanks you are right, the error was clear enough..I'll try again and report back – gpasci Jan 28 '19 at 15:07
Do you know if it's possible to use it with `v-for` (like with ``)? – Mariusz Pawelski Jun 01 '20 at 16:29
How to add transition for disappearing the text? – Satnam Singh Jun 12 '20 at 15:55

score 8 · Answer 2 · answered Apr 03 '20 at 15:12

If you are using Vuetify transitions around your router-view, the transition can sometimes be jarring on leave/enter.

To make the transition look smoother try the prop hide-on-leave="true"

<v-scroll-x-transition mode="in" hide-on-leave="true">
  <router-view></router-view>
</v-scroll-x-transition>

score 1 · Answer 3 · answered Jan 10 '23 at 13:10

1

try this :

<v-fab-transition appear>
  <p>hello</p>
</v-fab-transition>

answered Jan 10 '23 at 13:10

djaber atia

71
1
4

How to use "vuetify" transitions on my components?

3 Answers3