Vue - 过渡与动画transition

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/wxw20147854/article/details/82835748

这篇文章介绍Vue的过渡与动画，主要是用到组件transition。
作用范围：一般搭配v-if、v-show、动态组件、组件根节点来使用。

在举栗子之前，我们先说说transition的钩子函数：
v-enter：定义上半场过渡的初始状态；在过渡开始前被添加，在过渡开始时会被移除
v-enter-to：定义上半场过渡的结束状态；在过渡开始时被添加，在过渡完成时会被移除
v-enter-active：这里包含了上面的v-enter、v-enter-to两个时间段，在这里可以对上半场过渡定义过渡时间、曲线等
v-leave：定义下半场过渡的初始状态；在过渡开始前被添加，在过渡开始时会被移除
v-leave-to：定义下半场过渡的结束状态；在过渡开始时被添加，在过渡完成时会被移除
v-leave-active：这里包含了上面的v-leave、v-leave-to两个时间段，在这里可以对下半场过渡定义过渡时间、曲线等

注：
通过钩子函数的说明，可以看出，除去元素本身的样式外，钩子函数中的这6个类会在一定时间添加、删除，所以我们在使用过渡效果时间必须考虑元素本身的样式。
举一个例子，我拿下面的html代码做一下说明：

在例子中，我的初意是：
（1）p标签在被显示的时候，以透明状态从右边进入，完成过渡之后的状态是0.4的透明度显示
（2）p标签在被隐藏的时候，以0.4透明度向右移动并变成透明，完成后的状态是透明不可见
但是在实际情况下：
（1）p标签进入时（上半场过渡）：在过渡开始前，p标签会被添加类v-enter-active、类v-enter；当过渡开始时，类v-enter被移除，添加类v-enter-to。即效果是p标签以透明状态从右边进入，一直到0.4透明度，这与我的上半场的前半部分的初意一致
（2）在上半场过渡完成后：类v-enter-active、类v-enter-to都被移除，这个时候第一个问题出现了，这两个类被移除后，p标签透明度变为1，并未维持在0.4，这与我的上半场的后半部分的初意不一致
（3）在p标签出去时（下半场过渡）：在过渡开始前，p标签理论上会被添加类v-leave-active、类v-leave；在过渡开始时，类v-leave被移除，添加类v-leave-to。因为理论上类v-leave是在瞬间进行添加、移除的，所以我未观察到；根据实际效果我觉得类v-leave并未起作用，因为实际效果是p标签在开始向右移动时，透明度是1，并未变成0.4，这是第二个问题

问题总结：
（1）在用钩子函数进行过渡效果制作时，v-enter-to、v-leave这两个类作用不大，第一个类是因为会被移除，第二个类是未起作用。所以可以不写这两个类的样式
（2）如果强迫想要写这两个类的样式的话，那就必须将这两个类的样式写成跟元素本身样式一致

自定义过渡类名：
在页面中，我们可能有多个地方需要进行过渡效果，那么如果使用vue提供的默认那6个类，那么所有要过渡地方的过渡效果都是一样的了，这不是我们想要的。这个时候就需要我们自己定义专属于各个过渡效果的类名。
其实很简单，只要给transition标签添加name属性，在name属性中写入自己的类名前缀，注意是“类名前缀”！！！
例如<transition name="my"></transition>，那么在使用类名的时候就是这样的：.my-leave、.my-enter-to等。
注意只能更改前缀，后面的enter、enter-to、leave、leave-to、enter-active、leave-active是固定死的，是不能变的！！！

使用过渡样式的方式：
（1）第一种就是使用前面例子的方式，在style里面定义 前缀-enter 等
（2）第二种方式是使用transition的属性来指定类，类名可以自己随便定义，没有格式限制。如图：


使用钩子函数进行过渡：
钩子函数共分为8个周期，使用钩子函数可以做到只进行上半场过渡或者下半场过渡，如图例子：


图中红框内是上半场过渡（可以显示出效果），但是下半场动画看着代码没毛病，就是显示不出来效果，要是有知道原因的老铁请在评论区留言，先多谢了！
注：
（1）在enter和leave中，在写效果之前必须调用 el.offsetWidth 或其他offset类型，这个东西虽然没有实际意思，但是必须写入，不然效果出不来
（2）在enter和leave中，在写完效果之后必须调用done()；否则enter和leave会被同步调用，过渡立即完成。

过渡列表：
（1）对列表进行过渡渲染不能再使用transition，必须使用transition-group元素包裹；
（2）一般列表都是通过v-for来实现的，这个时候必须加上 :key 属性，这个是官方强制要求的。
（3）若是要对列表进行数据删除，并且在被删除元素进行过渡移走时、下一个元素顶上来也必须实现动画，那么就要使用.v-move这个类（写transition）、在.v-leave-active中写position:absolute（这个时候要记得给被删除元素设置宽高）
（4）transition-group在DOM上不会像transition一样什么都不显示，而是会以一个真实的span标签进行显示；因为列表一般是包含在ul、ol、dl中，这些标签W3C规定只能添加 li 元素，那么这里的span包含在ul中就不合规范了，我们可以给transi-group设置属性tag="ul"，这个是指定transition-group元素被渲染成什么元素
（5）如果要实现列表进入时的动画，可以给transition-group添加appear属性即可

总结：
（1）给一个元素设置过渡效果有三种方式：
      （a）使用v-enter等类
      （b）使用before-enter等钩子函数
      （c）使用enter-class等过渡样式
（2）给列表添加过渡要使用transition-group进行包裹