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-expand-both-transition	Used to expand content in both directions.
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-x-reverse-transition	Scroll X reverse transitions continue along the horizontal axis.
v-scroll-y-transition	Scroll Y transitions continue along the vertical axis.
v-scroll-y-reverse-transition	Scroll Y reverse transitions continue along the vertical axis.
v-slide-x-transition	Slide X transitions slide in from the left.
v-slide-x-reverse-transition	Slide X reverse transitions slide in from the right.
v-slide-y-transition	Slide Y transitions slide in from the top.
v-slide-y-reverse-transition	Slide Y reverse transitions slide in from the bottom.
v-dialog-top-transition	Dialog transitions slide in from the top.
v-dialog-bottom-transition	Dialog transitions slide in from the bottom.

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.

When using v-expand-transition or v-expand-x-transition, the transition works by animating an element’s height or width between 0 and its natural size. Because of this, applying padding directly to the transitioning element (such as v-alert) can cause jittery or uneven animations.

If you need padding, wrap your content in a container element (like a div or v-card) and apply the transition to that container instead. This ensures the expand transition runs smoothly, since the wrapper div has no conflicting padding or margin.

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!

Create your own

You can use Vuetify's transition helper function to easily create your own custom transitions.

import { createCssTransition } from 'vuetify/util/transitions';

createCssTransition('my-transition')

The argument passed to the createCssTransition function will be the name of the transition that you can hook into your style. This is an example of what my-transition looks like:

scss

.my-transition {
  &-enter-active,
  &-leave-active {
    position: absolute;
    transition: 1s;
  }

  &-enter-from,
  &-leave-to {
    opacity: 0;
  }
}

You can now use this custom transition in a few different ways.

As a component

The createCssTransition function will return a component that you can use in your template.

As a prop

Many of Vuetify’s components contain a transition prop. You can send the name of your custom transition to the transition prop.