Store

For Enterprise

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.

Vuetify comes with over 10 custom css animations that can be applied to numerous components or your own custom use-case

Select your desired component from below and see the available props, slots, events and functions.

Below is a collection of simple to complex examples.

Slide x transitions move along the horizontal axis.

Animations use the application's $primary-transition.

Scroll X transitions continue along the horizontal axis.

Scroll Y transitions continue along the vertical axis.

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

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

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

Programmatically control the transition origin with a simple prop.

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

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:

Ready for more? Continue reading with:

Caught a mistake or want to contribute to the documentation? Edit this page on GitHub!