Vue.js 过渡动画 CSS 类名详解：v-enter 与 v-leave-active 的区别

首先参考官方文档中的示意图。

Vue.js 过渡类名基本概念

官方文档主要解释了 v-enter、v-enter-active、v-leave 和 v-leave-active 这四个类名的含义。起初我对此感到困惑，容易将其与鼠标的 mouseover 和 mouseout 事件混淆。经过多方查阅资料，我逐渐理清了思路。以下总结了我的理解，希望能帮助遇到同样问题的开发者，也欢迎指正我的理解是否有误。

初始状态：

我们通过一个具体实例来验证，实践是检验真理的唯一标准。

运行结果：当点击按钮使 show 变量变为 false 时，div 元素消失；再次点击按钮使 show 变为 true 时，div 元素从蓝色逐渐过渡变为橙色，整个过渡过程耗时 3 秒。

若将样式配置修改为：

运行结果：当点击按钮使 show 变量变为 false 时，div 元素从橙色逐渐过渡变为蓝色，整个过渡过程耗时 3 秒。

v-enter 与 v-leave 的区别

通过上述两个示例，可以清晰地看出 v-enter 和 v-leave 之间的区别。

v-enter：定义目标元素在消失后重新出现时的初始状态；

v-leave：定义目标元素在准备消失时的初始状态；

v-enter-active 与 v-leave-active 的作用

然而，以上两个类名仅定义了瞬间的状态，类似于 Flash 动画中的第一帧。从第二帧到结束帧的过渡效果，则由 v-enter-active 和 v-leave-active 负责。

v-enter-active：定义目标元素出现在文档中的最终状态（即过渡结束时的最后一帧）；

v-leave-active：定义目标元素离开文档时的最终状态（即过渡结束时的最后一帧），展示完该状态后元素消失。

此外，过渡效果（transition）通常定义在上述两个带 -active 后缀的样式中。这也解释了为什么官方文档中 v-enter-active 和 v-leave-active 被表示为一段距离，因为它们涵盖了整个过渡过程。

注意：这两个带 -active 的样式必须定义在对应的 v-enter 或 v-leave 之后，否则过渡显示将无效。

以上是我对 Vue.js 过渡 CSS 类名的理解，希望对大家有所帮助。如有任何疑问，请留言，我会及时回复。感谢大家对本站的支持！