Transitions
Smooth animations help make a UI feel great. Using Vue’s transition system and re-usable functional components, you can easily control the motion of your application. Most components can have their transition altered through the transition prop.
API
| Name | Description |
|---|---|
| v-expand-transition | The expand transition is used in Expansion Panels and List Groups. There is also a horizontal version available with v-expand-x-transition. |
| v-fab-transition | An example of the fab transition can be found in the v-speed-dial component. |
| v-fade-transition | An example of the fade transition can be found on the Carousel component. |
| v-scale-transition | Many of Vuetify’s components contain a transition prop which allows you to specify your own. |
| v-scroll-x-transition | Scroll X transitions continue along the horizontal axis. |
| v-scroll-y-transition | Scroll Y transitions continue along the vertical axis. |
| v-slide-x-reverse-transition | Slide X reverse transitions slide in from the right. |
| v-slide-x-transition | Slide X transitions slide in from the left. |
| v-slide-y-reverse-transition | Slide Y reverse transitions slide in from the bottom. |
| v-slide-y-transition | Slide Y transitions slide in from the top. |
| v-tab-reverse-transition | Tab reverse transitions slide in from the right. |
| v-tab-transition | Tab transitions slide in from the left. |
| v-toggle-slide-x-reverse-transition | Toggle Slide X reverse transitions slide in from the right. |
| v-toggle-slide-x-transition | Toggle Slide X transitions slide in from the left. |
| v-toggle-slide-y-reverse-transition | Toggle Slide Y reverse transitions slide in from the bottom. |
| v-toggle-slide-y-transition | Toggle Slide Y transitions slide in from the top. |
Examples
Misc
Expand x
The expand transition is used in Expansion Panels and List Groups. There is also a horizontal version available with v-expand-x-transition.
Fab
An example of the fab transition can be found in the v-speed-dial component.
Fade
An example of the fade transition can be found on the Carousel component.
Scale
Many of Vuetify’s components contain a transition prop which allows you to specify your own.
Scroll x
Scroll X transitions continue along the horizontal axis.
Scroll y
Scroll Y transitions continue along the vertical axis.
Slide x
Slide x transitions move along the horizontal axis.
Slide y
Animations use the application’s $primary-transition.
Todo list
Using multiple custom transitions, it is easy to bring a simple todo list to life!