How to use "vuetify" transitions on my components?

javascript components material-design vuetify.js
YanDatsiuk picture YanDatsiuk · Jun 22, 2017 · Viewed 23.1k times · Source

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?

Answer

jordanw picture jordanw · Jul 26, 2017

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.

Related questions

React component initialize state from props

In React, are there any real differences between these two implementations? Some friends tell me that the FirstComponent is the pattern, but I don't see why. The SecondComponent seems simpler because the render is called only once. First: import React, { …

Read More
How to Pass data from child to parent component Angular

I have a component named search_detail which has another component inside it named calendar, SearchDetail_component.html <li class="date"> <div class="btn-group dropdown" [class.open]="DatedropdownOpened"> <button type="button" (click)="DatedropdownOpened = !DatedropdownOpened" class="…

Read More
React: Passing down props to functional components

I have a seemingly trivial question about props and functional components. Basically, I have a container component which renders a Modal component upon state change which is triggered by user click on a button. The modal is a stateless functional …

Read More