Menu
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?
501
Transition, as the word sounds, is when a change occurs while something moves from one state to another. State in the sense starting point and the ending point. Vue applies transition effects when elements are inserted, updated, or removed from the DOM.
The current version of Vuetify does not support Vue 3. Support for Vue 3 will come with the release of Vuetify v3 . When creating a new project, please ensure you selected Vue 2 from the Vue CLI prompts, or that you are installing to an existing Vue 2 project.
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.
124
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
