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.

Examples

#1 Slide X transitions
edit
Slide x transitions move along the horizontal axis.

#2 Slide Y transitions
edit
Animations use the applications $primary-transition.

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

#4 Fade transition
edit
Another example of the fade transition can be found on the Carousel component.

#5 Custom Origin
edit
Programmatically control the transition origin with a simple prop.

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:
import { createSimpleTransition } from '../../node_modules/vuetify/src/util/helpers'
 
const myTransition = createSimpleTransition('my-transition')
 
Vue.component('my-transition', myTransition)
content_copy
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:
.fade-transition
  &-leave-active
    position: absolute
 
  &-enter-active, &-leave, &-leave-to
    transition: $primary-transition
 
  &-enter, &-leave-to
    opacity: 0
content_copy