【Vue10】Css动画及其原理

比如说想添加一段点击按钮，div渐隐渐现的动画。

控制显示隐藏的主要逻辑
想让谁隐藏，就给谁的dom外层包裹一层<transition></transition>，然后给这个<transition>取个名字，用name标识。
像这样

还没完，来看一遍动画的过程。

我是动画全过程
当一个元素被transition包裹之后，Vue会自动的分析它的css样式，然后构建一个动画的流程。
图上的线和点就是动画的流程。
在动画即将被执行的这一瞬间，它会往div上增加两个class名字，分别是fade-enter和fade-enter-active。（这里的fade是刚刚给transition用name取的名字，不写name的话，默认的前缀是v）
当动画第一帧执行结束之后，transition这个标签被Vue分析过是个动画效果的时候，会在动画运行的第二帧时，做两件事。
1.去掉fade-enter这个class去掉
2.增加fade-enter-to这个class名
动画继续执行。
到结束的一瞬间，会把之前还存在的fade-enter-active和fade-enter-to这两个class都去掉。
对应的css样式这样写：
这样写这样写
先来分析一下。
fade-enter-active从动画即将运行的时候就存在，直到动画结束的时候才移出。在这里的css样式内，对opacity进行transition的监控，监控到opacity发生变化的话，让它在3s内慢慢发生变化。（最开始的元素不做处理的时候，opacity默认为1，这里让它点击按钮的时候为0，然后第二帧的时候开始移除开始移除fade-enter，opacity=0也就被移除掉了，恢复到了原始的opacity也就是1）
我是显示动画

咳咳，其实这里看动画还是有点生硬，显示的动画已经完成，但是还缺少隐藏的动画啊。
其实还有一张图。

我是动画结束时的过程
首先Vue会自动构建一个隐藏的流程，生成两个class：fade-leave和fade-leave-active，第二帧的时候去掉fade-leave，增加fade-leave-to，最后将还存在的fade-leave-active和fade-leave-to都移除掉。
对应的css样式是这样的:
这是隐藏时的样式
从隐藏动画开始的瞬间到最后结束，fade-leave-active都存在，所以要时刻监听opacity的样式，从显示到隐藏状态的时候，第一个瞬间，opacity是1，第二帧的时候加上opacity为0，一直到最后移除，这里就有个3s的过渡，所以从第二帧开始，div的opacity一直是0，直到动画结束。
是不是和显示的样式很像啊？两个可以合并起来，也就是这样子。
合并起来了
【PS】上面的样式合并的是v-enter和v-leave-to，切记不是v-enter和v-leave。
现在的动画是这样的
demo2.gif

这种动画是通过css3里的transition来实现的，Vue中也叫做过渡动画效果。

贴一下官网的解释：

6个class
动画前缀