vue动画理解，进入、离开、列表过分和路由切换。

vue的动画对于不少初学者，甚至对不少老鸟来讲也是很费劲，不容易控制的。
这篇文章讲vue动画的理解。其实没那么难。

动画理解

一个元素从A状态变成B状态，若是这个过程经过某种方式反应在视图上了，那么这个元素完成了一个动画。若是有不少状态A->B->C->D...，那么它完成了一系列动画。

重点：状态A、状态B和某种方式

vue控制三者的核心

6个class：

1. v-enter enter翻译过来是“进入”，这里的进入是指的进入时的状态(此时看不见元素)
2. v-leave-to leave-to翻译过来是“离开到”，这里指的是离开完成以后的状态(此时看不见元素)
3. v-leave leave翻译为“离开”，这里指离开时的状态(此时看得见元素)
4. v-enter-to enter-to翻译为“进入到”，这里指的是进入完成以后的状态(此时看得见元素)

咱们讨论的是进入、离开和列表过分时的动画，主要是在使用诸如v-if v-show 路由切换技术上，一个元素从有到无，从无到有，其实就只有两种状态（A、B），有和无。上诉的4个class就是用来指定这两种状态的：

a. v-enter和v-leave-to指定无时的状态（请结合英语或翻译理解）；b. v-leave和v-enter-to指定有时的状态（请结合英语或翻译理解）

此时，咱们定义了有和无两种状态，若是咱们的再指定某种方式，就能够把从无到有，从有到无的过程反应在视图上，造成咱们看到的过分或者动画。

1. v-enter-active 指定从无到有的变换方式

2. v-leave-active 指定从有到无的变换方式

因此，这两种属性里面指定的规则通常是transition和animation两种，分别对于简单的过分（线性）和复杂的动画（线性和非线性）

如今再看这个图片是否是很好理解了