Vue元素过渡效果

transition定义：过渡，提供了一种在更改CSS属性时控制动画速度的方法。 其可以让属性变化成为一个持续一段时间的过程，而不是立即生效的。

从定义可知，过渡是让css属性变化持续一段时间,首先我们得抓住重点，要想有过渡，必须要有属性值发生变化，比如背景颜色从白色到黑色，某个元素的宽度由200到400 等等（文字内容变化不属于此列）。元素插入页面不会产生过渡，元素的display属性值变化也不会产生过渡效果，那么vue是如何实现元素插入或者显隐实现过渡效果的呢？

vue提供了transition组件，可以给v-if，v-show，动态组件和跟组件添加过渡效果。

当插入或删除包含在 transition 组件中的元素时，Vue 将会做以下处理：

1. 自动嗅探目标元素是否应用了 CSS 过渡或动画，如果是，在恰当的时机添加/删除 CSS 类名。
2. 如果过渡提供了js钩子函数，这些钩子函数将在恰当的时机被调用
3. 如果没有找到 JavaScript 钩子并且也没有检测到 CSS 过渡/动画，DOM 操作 (插入/删除) 在下一帧中立即执行。

通过插入/删除过渡类名实现过渡，vue提供了6中过渡类名，实际上是5种，v-leave在2.0以后被移除

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

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

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

v-leave-to：定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效，在过渡/动画完成之后移除。

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

开始我们就说过，产生过渡，①属性发生变化，②定义了transition过渡方式。而且插入或者display属性变化是不会产生过渡效果得，那么vue是如何做到得，首先，我们看v-enter类，定义了过渡开始得状态，也就是元素被插入页面之前，在这我们可以属性，即过渡元素得初始状态，例如opacity:0，当元素被插入后，这个类被移除，这是关键，当移除v-enter后，此元素得opacity的值由0变为其初始设置的值，所以就有了过渡的条件之一，而v-enter-active类出现在整个进入过渡周期中，在这个类里我们定义元素如可控制过渡动画，也就是transition属性，有时候，行内元素无法实现动画，我们也可以在这个类中该便其display属性，使其在过渡期间以行内块或者块级元素展示。

v-enter-to：定义了进入过渡结束的状态，比如，我们在这个类里设置opacity:0.8,则过渡效果为元素的透明度由0=>0.8;过渡结束后再变为1。

v-leave-to：离开过渡被处罚的下一帧被触发，也就是在移除元素的前一刻，加入此类，改变其属性值

v-leave-active：定了了离开过渡的动画方式