Vue项目--动画效果的改变

前言：

本篇文章主要是用于解决Vue2改Vue3项目过程中遇到的动画问题

vue2中动画效果

1. 作用：在插入、更新或移除 DOM元素时，在合适的时候给元素添加样式类名。
2. 写法：
   1. 准备好样式：
      - 元素进入的样式：
        1. v-enter：进入的起点
        2. v-enter-active：进入过程中
        3. v-enter-to：进入的终点
      - 元素离开的样式：
        1. v-leave：离开的起点
        2. v-leave-active：离开过程中
        3. v-leave-to：离开的终点
   2. 使用```<transition>```包裹要过度的元素，并配置name属性：

      ```vue
      <transition name="hello">
          <h1 v-show="isShow">你好啊！</h1>
      </transition>
      ```

注意：对于一个有名字的过渡效果，对它起作用的过渡 class 会以其名字而不是 v 作为前缀

//配置name属性后样式名字会发生变化
//例如name==“www”
 - 元素进入的样式：
        1. www-enter：进入的起点
        2. www-enter-active：进入过程中
        3. www-enter-to：进入的终点
      - 元素离开的样式：
        1. www-leave：离开的起点
        2. www-leave-active：离开过程中
        3. www-leave-to：离开的终点

   3. 备注：若有多个元素需要过度，则需要使用：```<transition-group>```，且每个元素都要指定```key```值。

vue3中的动画效果

v-enter-from：进入动画的起始状态

v-enter-active：进入动画的生效状态。

v-enter-to：进入动画的结束状态。

v-leave-from：离开动画的起始状态。

v-leave-active：离开动画的生效状态。

v-leave-to：离开动画的结束状态。

v-enter-active 和 v-leave-active 给我们提供了为进入和离开动画指定不同速度曲线的能力

当我们使用第三方库时的变化（vue3）

enter-from-class
enter-active-class
enter-to-class
leave-from-class
leave-active-class
leave-to-class

他们的优先级高于普通的类名。

动画执行顺序（vue3）

我们可能想要先执行离开动画，然后在其完成之后再执行元素的进入动画。手动编排这样的动画是非常复杂的，好在我们可以通过向 <Transition> 传入一个 mode prop 来实现这个行为：

<transition name="router-fade" mode="out-in">

这个代表先出后进

<Transition> 也支持 mode="in-out"

这个代表先进后出