biuaxia

title: Vue3 Animation Enter Transition & Exit Transition
date: 2022-06-07 09:32:00
toc: false
index_img: https://puep.qpic.cn/coral/Q3auHgzwzM4fgQ41VTF2rPqFqGEyYkuRdiaG2TiaYiaZZYzTR5hq7tVRw/0
category:

• Front-end
  tags:
• Automatic
• Different
• Vue
• Vue3
• Animation
• Transition
• Enter
• Exit
• JavaScript

Original: Enter Transition & Exit Transition | Vue.js，This site is only for saving records and adjusting formatting, and does not engage in commercial activities for profit.

#Enter Transition & Exit Transition#

Vue provides various methods for applying transition effects when inserting, updating, or removing items from the DOM. This includes the following tools:

• Automatically applying classes for CSS transitions and animations;
• Integrating third-party CSS animation libraries, such as animate.css;
• Directly manipulating the DOM using JavaScript during transition hooks;
• Integrating third-party JavaScript animation libraries.

Here, we will only introduce enter and exit transitions. You can also learn about list transitions and managing transition states in the next section.

#Transition for Single Element/Component#

Vue provides a wrapper component called transition that can be used to add enter/exit transitions to any element or component in the following scenarios:

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

Here is a typical example:

<div id="demo">
  <button @click="show = !show">
    Toggle
  </button>

  <transition name="fade">
    <p v-if="show">hello</p>
  </transition>
</div>

const Demo = {
  data() {
    return {
      show: true
    }
  }
}

Vue.createApp(Demo).mount('#demo')

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s ease;
}

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

When inserting or removing elements contained within the transition component, Vue will perform the following actions:

1. Automatically detect whether the target element has applied CSS transitions or animations, and add/remove CSS class names at the appropriate time.
2. If the transition component provides JavaScript hooks, these hooks will be called at the appropriate time.
3. If no JavaScript hooks are found and no CSS transitions/animations are detected, DOM operations (insertion/removal) will be executed immediately in the next frame. (Note: This refers to the browser's frame-by-frame animation mechanism, which is different from Vue's nextTick concept)

#Transition Classes#

In enter/exit transitions, there are 6 classes that toggle:

1. v-enter-from: Defines the starting state of the enter transition. It takes effect before the element is inserted and is removed in the next frame after the element is inserted.
2. v-enter-active: Defines the active state of the enter transition. It is applied throughout the enter transition, takes effect before the element is inserted, and is removed after the transition/animation is complete. This class can be used to define the duration, delay, and easing function of the enter transition.
3. v-enter-to: Defines the ending state of the enter transition. It takes effect in the next frame after the element is inserted (at the same time as v-enter-from is removed), and is removed after the transition/animation is complete.
4. v-leave-from: Defines the starting state of the exit transition. It takes effect immediately when the exit transition is triggered and is removed in the next frame.
5. v-leave-active: Defines the active state of the exit transition. It is applied throughout the exit transition, takes effect immediately when the exit transition is triggered, and is removed after the transition/animation is complete. This class can be used to define the duration, delay, and easing function of the exit transition.
6. v-leave-to: Defines the ending state of the exit transition. It takes effect in the next frame after the exit transition is triggered (at the same time as v-leave-from is removed), and is removed after the transition/animation is complete.

Each of these classes will be prefixed with the name of the transition. If you use a <transition> without a name, v- is the default prefix for these class names. For example, if you use <transition name="my-transition">, then v-enter-from will be replaced with my-transition-enter-from.

v-enter-active and v-leave-active can control different easing curves for enter/exit transitions, as shown in the example in the following section.