vue中的transition的理解及对transition

vue 中有一个transition 系统组件可以实现动画，也可以实现页面间的切换。

<transition>内容的改变（样式改变，显示，移除）会以动画的形式展现</transition>  如果transition内是 router-view 则可以实现页面切换动画。

transition 动画的实现原理是 在不同的阶段为 transition内的元素添加不同的类，来达到效果。

 在进入/离开的过渡中，会有 6 个 class 切换。

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

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

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

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

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

6. 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，如果同时定义了其他样式，这个过渡效果会立即生效。

         如果一样式 发生变化，然后马上又变回来，过渡会立马再样式变回来的时候结束。

vue中两个组件间切换，如果不设置key，很可能只会改内容不会改标签，两个元素间动画切换使用 out-in比较合适

当只用 JavaScript 过渡的时候， 在 enter 和 leave 中，回调函数 done 是必须的 。否则，它们会被同步调用，过渡会立即完成。这个done 其实就是vue设置的过渡完成的回调，比如移除掉dom解冻。

推荐对于仅使用 JavaScript 过渡的元素添加 v-bind:css="false"，Vue 会跳过 CSS 的检测。这也可以避免过渡过程中 CSS 的影响。

列表过渡:

transition-group 列表元素位置移动时会添加一个 v-move 的类，使用FLIP的动画原理，然列表平滑的过渡，但是当指定了name后，列表元素移除无法平滑过渡，需要将:name-leave-active设置为absolute,(没明白是什么原因)，不指定name时，列表元素添加和删除，位置发生改变的元素都会被添加上v-move.

 

动态组件过渡的最佳实践是将过渡效果封装成组件，通过 prop 传递效果