Motion

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.

Usage

Slide x transitions move along the horizontal axis.

API

Name
group
Default
false
Type
boolean

Creates a transition-group component. vue docs

Name
hide-on-leave
Default
false
Type
boolean

Hides the leaving element (no exit animation)

Name
leave-absolute
Default
false
Type
boolean

Absolutely positions the leaving element (useful for FLIP)

Name
mode
Default
undefined
Type
string

Sets the transition mode (does not apply to transition-group) vue docs

Name
origin
Default
'top center 0'
Type
string

Sets the transition origin

Examples

Slide X transitions

Slide x transitions move along the horizontal axis.

Slide Y transitions

Animations use the application's $primary-transition.

Scale transition

Many of Vuetify's components contain a transition prop which allows you to specify your own.

Fade transition

Another example of the fade transition can be found on the Carousel component.

Expand transition

The expand transition is used in Expansion Panels and List Groups. There is also a horizonal version available with v-expand-x-transition.

Custom Origin

Programmatically control the transition origin with a simple prop.

Todo list

Using multiple custom transitions, it is easy to bring a simple todo list to life!

Create your own

You can use Vuetify's transition helper function to easily create your own custom transitions. This function will return an object that you can import into Vue. Using Vue's functional component option will make sure your transition is as efficient as possible. Simply import the function:

The createSimpleTransition function accepts 1 argument, name. This will be the name that you can hook into with your style. This is an example of what v-fade-transition looks like:

Edit this page | language on Github