Transition & Animation

# Transition & Animation

# Usage

Wrap the element or component that needs animation in a <transition> tag with a custom name. Vue will add corresponding CSS class names based on the element's toggle (enter/leave) process, allowing you to freely use CSS class names to set CSS transitions & animations.

# Transition Class Names

There are 6 class switches during the enter/leave transition.

Class name lifecycle

Enter
- v-enter only exists on the first frame
- v-enter-active from first frame to last frame, removed when finished
- v-enter-to from second frame to last frame, removed when finished
Leave
- v-leave only exists on the first frame
- v-leave-active from first frame to last frame, removed when finished
- v-leave-to from second frame to last frame, removed when finished

If you use a <transition> without a name, then v- is the default prefix for these class names. If you use name="fade", then the v- prefix will be replaced with fade-.

# CSS Transition Demo

See the Pen vue的过渡动画 by xugaoyi (@xugaoyi) on CodePen.

# CSS Animation Demo

See the Pen vue的动画 by xugaoyi (@xugaoyi) on CodePen.

# Example Usage in a Component

<template>
    <transition name="slide">
         <div class="add-song">
             ...
        </div>
    </transition>
<template>

1
2
3
4
5
6
7

 .add-song
    &.slide-enter-active, &.slide-leave-active
      transition: all 0.3s
    &.slide-enter, &.slide-leave-to
      transform: translate3d(100%, 0, 0)

1
2
3
4
5

Edit

#Vue

Last Updated: 2026/03/21, 12:14:36

← Vue Parent-Child Component Lifecycle Order Using the Animate.css Library→

Recent Updates

01
How I Discovered Disposable Email — A True Story 06-12

02
Animations in Grid Layout 09-15

03
Renaming a Git Branch 08-11

More Articles >