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两种，分别对于简单的过度（线性）和复杂的动画（线性和非线性）

现在再看这个图片是不是很好理解了

转载于:https://www.cnblogs.com/looyulong/p/10317271.html