Vue中css过渡动画原理

先来看一下简单的切换显示按钮

我现在希望在Hello world能有一个渐隐渐现的效果

那么就需要在div外层包裹一个transition标签

当然只是这样是无法形成过渡效果的

当你在外层加了transition标签之后，Vue会自动的构建一个动画的流程，

当动画执行的一瞬间，他会往内部的div上增加两个class名字，分别是fade-enter和fade-enter-active，之所以是fade-什么什么，是因为transiton标签name是fade，

当动画运行到第二帧的时候，Vue又会帮助你把fade-enter删除，然后添加一个fade-enter-to

再当动画执行到结束的一瞬间，又把fade-enter-active和fade-enter-to删除掉

至于为什么要这样，来解释一下

这样子就会明显的过渡效果了

在上面的Vue动画过渡图中，我们发现fade-enter-active是全程存在的，他的意思是，如果我监听到了元素opacity发生了变化，那么我就让这个变化在3s内完成，

fade-enter在第一帧的时候存在，在第二帧的时候被删除，

首先在第一帧的时候，fade-enter-active和fade-enter同时存在，并且opacity=0，在第二帧的时候，fade-enter被删除，opacity恢复到原来的初始状态，就是1，在这个过程中，opacity发生了变化，所以fade-enter-active就让这个变化在3秒内完成

如果不写transiton的name，默认是v

再来看Vue元素从显示到隐藏的动画效果

和上面enter的理解基本一致

只不过这次要在v-leave-to上设置opacity：0

除了v-if可以套用transiton标签外，v-show和动态组件也可以，都会有过渡效果

整体过程如下图

下面摘自Vue官网：

1. v-enter：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。

2. v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。

3. v-enter-to: 2.1.8版及以上 定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter 被移除)，在过渡/动画完成之后移除。

4. v-leave: 定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。

5. v-leave-active：定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。

6. v-leave-to: 2.1.8版及以上 定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave 被删除)，在过渡/动画完成之后移除。