Vue provides application transition effects in many different ways when inserting, updating or removing DOM. Includes the following tools:

• Automatically apply class in CSS transition and animation
• You can use third-party CSS animation libraries, such as animate css
• Use JavaScript in the transition hook function to directly operate DOM, which can be used in conjunction with third-party JavaScript animation libraries, such as velocity js

Single component / transition element

Vue provides encapsulated components of transition. In the following cases, entry / exit transitions can be added to any element and component

• Conditional rendering (using {v-if)
• Conditional display (using v-show)
• Dynamic component
• Component root node

Here is a typical example:

<div id="demo">
  <button v-on:click="show = !show">
    Toggle
  </button>
  <transition name="fade">
    <p v-if="show">hello</p>
  </transition>
</div>
new Vue({
  el: '#demo',
  data: {
    show: true
  }
})
.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}

When inserting or deleting elements contained in the transition component, Vue will do the following:

1. Automatically sniff whether CSS transition or animation is applied to the target element. If so, add / delete CSS class names at the right time.

2. If the transition component provides JavaScript hook function , these hook functions will be called at the right time.

3. If the JavaScript hook is not found and the CSS transition / animation is not detected, the DOM operation (insert / delete) is executed immediately in the next frame. (Note: This refers to the browser frame by frame animation mechanism, which is different from Vue's "nextTick" concept)

Transitional class name

In the transition of entry / exit, there will be 6 class switches.

1. v-enter: defines the start state of the transition. Takes effect before the element is inserted and is removed at the next frame after the element is inserted.

2. v-enter-active: defines the state when the transition takes effect. Applied throughout the transition phase, it takes effect before the element is inserted and removed after the transition / animation is completed. This class can be used to define the process time, delay and curve function of entering the transition.

3. v-enter-to: version 2.1.8 and above definitions enter the end state of transition. The next frame takes effect after the element is inserted (at the same time # v-enter # is removed) and is removed after the transition / animation is completed.

4. v-leave: defines the start state of the exit transition. Takes effect immediately when the exit transition is triggered and the next frame is removed.

5. v-leave-active: defines the state when the exit transition takes effect. Applied throughout the exit transition phase, it takes effect immediately when the exit transition is triggered and is removed after the transition / animation is completed. This class can be used to define the process time, delay and curve function of leaving the transition.

6. v-leave-to: version 2.1.8 and above define the end state of leaving the transition. After the departure transition is triggered, the next frame takes effect (at the same time, # v-leave # is deleted) and is removed after the transition / animation is completed.

For these class names that are switched during the transition, if you use a < transition >, which has no name, then ， V - is the default prefix of these class names. If you use < transition name = "my transition" >, then "v-enter" will be replaced by "my transition enter".

v-enter-active and v-leave-active can control different transition curves of entry / exit transition, which will be illustrated by an example in the following chapters.  

1, Automatically apply class in CSS transition and animation

1.1 CSS transition

Commonly used transitions are transitions using CSS.

Here is a simple example:

<div id="example-1">
  <button @click="show = !show">
    Toggle render
  </button>
  <transition name="slide-fade">
    <p v-if="show">hello</p>
  </transition>
</div>
new Vue({
  el: '#example-1',
  data: {
    show: true
  }
})
/* Different entry and exit animations can be set */
/* Set duration and animation functions */
.slide-fade-enter-active {
  transition: all .3s ease;
}
.slide-fade-leave-active {
  transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.slide-fade-enter, .slide-fade-leave-to
/* .slide-fade-leave-active for below version 2.1.8 */ {
  transform: translateX(10px);
  opacity: 0;
}

1.2. CSS animation

CSS animation is used in the same way as CSS transition. The difference is that in animation, the "v-enter" class name will not be deleted immediately after the node is inserted into DOM, but will be deleted when the "animation end" event is triggered.

Example: (compatibility prefix omitted)

<div id="example-2">
  <button @click="show = !show">Toggle show</button>
  <transition name="bounce">
    <p v-if="show">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris facilisis enim libero, at lacinia diam fermentum id. Pellentesque habitant morbi tristique senectus et netus.</p>
  </transition>
</div>
new Vue({
  el: '#example-2',
  data: {
    show: true
  }
})
.bounce-enter-active {
  animation: bounce-in .5s;
}
.bounce-leave-active {
  animation: bounce-in .5s reverse;
}
@keyframes bounce-in {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(1);
  }
}

2, You can use third-party CSS animation libraries, such as animate css

Custom transition class name

We can customize the transition class name through the following attribute s:

• enter-class
• enter-active-class
• enter-to-class (2.1.8+)
• leave-class
• leave-active-class
• leave-to-class (2.1.8+)

Their priority is higher than ordinary class names, which is important for Vue's transition system and other third-party CSS animation libraries, such as Animate.css The combination is very useful.

Example:

<link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet" type="text/css">

<div id="example-3">
  <button @click="show = !show">
    Toggle render
  </button>
  <transition
    name="custom-classes-transition"
    enter-active-class="animated tada"
    leave-active-class="animated bounceOutRight"
  >
    <p v-if="show">hello</p>
  </transition>
</div>
new Vue({
  el: '#example-3',
  data: {
    show: true
  }
})

Use both transitions and animations

In order to know the completion of the transition, Vue must set up the corresponding event listener. It can be transitionend or animationend, depending on the CSS rules applied to the element. If you use any of them, Vue can automatically identify the type and set up listening.

However, in some scenes, you need to set two transition effects for the same element at the same time. For example, the "animation" is triggered and completed quickly, and the "transition" effect is not over yet. In this case, you need to use "type" attribute and set "animation" or "transition" to explicitly declare the type you need Vue to listen to.

Dominant transition duration

In many cases, Vue can automatically determine the completion time of the transition effect. By default, Vue waits for its first "transitionend" or "animationend" event on the root element of the transition effect. However, it can also be set differently - for example, we can have a carefully choreographed series of transition effects, in which some nested internal elements have delayed or longer transition effects than the root element of the transition effect.

In this case, you can customize an explicit transition duration (in milliseconds) with the duration prop on the < transition > component:

<transition :duration="1000">...</transition>

You can also customize the duration of entry and exit:

<transition :duration="{ enter: 500, leave: 800 }">...</transition>

3, Use JavaScript in the transition hook function to directly operate DOM, which can be used in conjunction with third-party JavaScript animation libraries, such as velocity js

3.1 JavaScript hook

JavaScript hooks can be declared in attribute

<transition
  v-on:before-enter="beforeEnter"
  v-on:enter="enter"
  v-on:after-enter="afterEnter"
  v-on:enter-cancelled="enterCancelled"

  v-on:before-leave="beforeLeave"
  v-on:leave="leave"
  v-on:after-leave="afterLeave"
  v-on:leave-cancelled="leaveCancelled"
>
  <!-- ... -->
</transition>

// ...
methods: {
  // --------
  // Entering
  // --------

  beforeEnter: function (el) {
    // ...
  },
  // When and CSS When used in combination
  // Callback function done Is optional
  enter: function (el, done) {
    // ...
    done()
  },
  afterEnter: function (el) {
    // ...
  },
  enterCancelled: function (el) {
    // ...
  },

  // --------
  // When leaving
  // --------

  beforeLeave: function (el) {
    // ...
  },
  // When and CSS When used in combination
  // Callback function done Is optional
  leave: function (el, done) {
    // ...
    done()
  },
  afterLeave: function (el) {
    // ...
  },
  // leaveCancelled Only for v-show in
  leaveCancelled: function (el) {
    // ...
  }
}

These hook functions can be used in combination with CSS transitions/animations or alone.

When only JavaScript is used for transition, you must use "done" in "enter" and "leave" for callback. Otherwise, they will be called synchronously and the transition will be completed immediately.

It is recommended to add "v-bind:css="false "for elements that only use JavaScript transition. Vue will skip CSS detection. This can also avoid the influence of CSS in the transition process.

3.2. One uses velocity JS simple example:

<!--
Velocity and jQuery.animate It works in a similar way and is also used to realize JavaScript A great choice for animation
-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"></script>

<div id="example-4">
  <button @click="show = !show">
    Toggle
  </button>
  <transition
    v-on:before-enter="beforeEnter"
    v-on:enter="enter"
    v-on:leave="leave"
    v-bind:css="false"
  >
    <p v-if="show">
      Demo
    </p>
  </transition>
</div>