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.

Edit this page

Copy Page as Markdown

ads via vuetify

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.

Toggle Inline API

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!

What are you working on?

Tasks: 2

Remaining: 2

Completed: 0

Foobar

Fizzbuzz

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:

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

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