Vue transition flowchart

  1. Define transition time, delay, and curve functions in v-enterative and V-leave-active.
  2. Set v-Enter and V-leave-to to the opposite of the normal display of the element.
  3. Define the animation in v-enterative and V-leave-active.
  4. In the display state, the individual class styles in the transition process are removed.
  5. Generally, the v-enter-to and V-leave styles are the same as those of V-Enter -active, and the V-leave -to and V-leave -active styles are the same. Therefore, set v-enter-active, V-leave-active, and V-Enter. V-enter is used to initialize the style and ensure transition effect.