35

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">
  <!-- content -->
</v-card>

How to start transition?

3 Answers 3

73

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.

7
  • 42
    much-needed part of the documentation
    – ierdna
    Commented Oct 20, 2017 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
    Commented Feb 15, 2018 at 6:49
  • Unknown custom element: <slide-x-transition> - did you register the component correctly?
    – gpasci
    Commented Jan 28, 2019 at 0:05
  • 2
    @gpasci You need to have the v- before the slide x transition, as in <v-slide-x-transition>.
    – jordanw
    Commented Jan 28, 2019 at 13:32
  • 1
    Thanks you are right, the error was clear enough..I'll try again and report back
    – gpasci
    Commented Jan 28, 2019 at 15:07
9

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>
2

try this :

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.