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!