CODEWITHSUNDEEP
javascriptcomponentsmaterial-designvuetify.js
YanDatsiuk
YanDatsiuk

Reputation: 1963

How to use "vuetify" transitions on my components?

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?

Upvotes: 35

Views: 43959

Answers (3)

djaber atia
djaber atia

Reputation: 101

try this :

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

Upvotes: 2

BigJoeNH
BigJoeNH

Reputation: 411

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>

Upvotes: 9

jordanw
jordanw

Reputation: 1505

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.

Upvotes: 73

Related Questions