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

NameDescription
v-expand-transitionThe expand transition is used in Expansion Panels and List Groups. There is also a horizontal version available with v-expand-x-transition.
v-fab-transitionAn example of the fab transition can be found in the v-speed-dial component.
v-fade-transitionAn example of the fade transition can be found on the Carousel component.
v-scale-transitionMany of Vuetify’s components contain a transition prop which allows you to specify your own.
v-scroll-x-transitionScroll X transitions continue along the horizontal axis.
v-scroll-y-transitionScroll Y transitions continue along the vertical axis.
v-slide-x-reverse-transitionSlide X reverse transitions slide in from the right.
v-slide-x-transitionSlide X transitions slide in from the left.
v-slide-y-reverse-transitionSlide Y reverse transitions slide in from the bottom.
v-slide-y-transitionSlide Y transitions slide in from the top.
v-tab-reverse-transitionTab reverse transitions slide in from the right.
v-tab-transitionTab transitions slide in from the left.
v-toggle-slide-x-reverse-transitionToggle Slide X reverse transitions slide in from the right.
v-toggle-slide-x-transitionToggle Slide X transitions slide in from the left.
v-toggle-slide-y-reverse-transitionToggle Slide Y reverse transitions slide in from the bottom.
v-toggle-slide-y-transitionToggle 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!

Ready for more?

Continue your learning with related content selected by the Team or move between pages by using the navigation links below.
Edit this page onGitHub