vue 中有一个transition 系统组件可以实现动画，也可以实现页面间的切换。
<transition>内容的改变（样式改变，显示，移除）会以动画的形式展现</transition> 如果transition内是 router-view 则可以实现页面切换动画。
transition 动画的实现原理是 在不同的阶段为 transition内的元素添加不同的类，来达到效果。
在进入/离开的过渡中，会有 6 个 class 切换。
-
v-enter：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧（requestAnimatFrame()内执行）移除。 -
v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。 -
v-enter-to: 2.1.8版及以上 定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时v-enter被移除)，在过渡/动画完成之后移除。 -
v-leave: 定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧（requestAnimatFrame()内执行）被移除。 -
v-leave-active：定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。 -
v-leave-to: 2.1.8版及以上 定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时v-leave被删除)，在过渡/动画完成之后移除。
总结来说:插入动画就是 enter 移除后 到加上 enter-to样式的变化（样式的书写顺序会导致不一样的效果） ，然后元素最终秒回到移除enter,enter-acitve,enter-to 后的样式
最佳实现是enter 上写初始状态，enter-to上写要变化的状态，enter-active上写过渡曲线
移除动画:leave,leave-active加上后样式的变化，或者说由leave 到leave-to 样式的变化，注意一点是如果 leave-to与未进入过渡状态的样式一样，过渡只会持续一个 requestAnimatFrame的时间。
最佳实践是：leave与当前样式相同，leave-to表示要过渡的样式，leave-active上写过渡效果。
注意：一旦一个元素上定义了transition，如果同时定义了其他样式，这个过渡效果会立即生效。
如果一样式 发生变化，然后马上又变回来，过渡会立马再样式变回来的时候结束。