本文深入解析 Vue.js 中过渡动画的四个核心 CSS 类名：v-enter、v-leave、v-enter-active 和 v-leave-active。通过对比元素进入和离开时的状态变化，阐明 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 类名的理解，希望对大家有所帮助。如有任何疑问，请留言，我会及时回复。感谢大家对本站的支持！