Vue基础教程（140）过渡和动画效果之单元素/组件的过渡中的过渡的类名：别让你的网页动得像PPT！让元素舞动起来，别再用v-show硬切了！让你的元素带着仪式感入场退场

还记得当年用jQuery写动画的日子吗？一行行animate()调用，一堆堆回调地狱，只为让div移动时能带点缓冲效果。现在用Vue，你可能会习惯性地用v-if和v-show直接切换元素显示隐藏——停！这不是在放PPT，我们的网页元素值得更有仪式感的入场和退场！

Vue的<transition>组件就像一位专业的舞台导演，而过渡类名就是导演给演员（你的元素）的详细动作指令。今天，就让我们揭开这些类名的神秘面纱，看看Vue是如何让我们的页面元素优雅舞动起来的。

一、六个关键类名：Vue过渡的“演员指令”

想象一下，你正在导演一场话剧。演员需要从后台走到舞台中央表演，演完后再从舞台中央退场。Vue的过渡系统也是同样的逻辑，它提供了六个类名对应元素进入和离开的各个阶段：

进入过渡（演员上场）：

• v-enter：演员在后台候场（元素插入前的起始状态）
• v-enter-active：演员从后台走向舞台的过程（元素整个进入过渡阶段）
• v-enter-to：演员到达舞台中央（元素插入后的结束状态）

离开过渡（演员退场）：

• v-leave：演员在舞台中央准备退场（元素离开前的起始状态）
• v-leave-active：演员从舞台中央走回后台的过程（元素整个离开过渡阶段）
• v-leave-to：演员完全回到后台（元素离开后的结束状态）

是不是有点像话剧导演的脚本？但等等，为什么这些类名都带个v-前缀？这其实是Vue的默认命名约定，就像给所有指令贴上了“Vue专属”的标签。

二、name属性：给你的过渡动画起个专属艺名

实际开发中，我们很少会用默认的v-前缀。想想看，如果一个项目里有多种动画，全都叫v-enter、v-leave，不就乱套了吗？这时候就需要name属性出场了！

<transition name="fade">
  <div v-if="show">我会淡入淡出！</div>
</transition>

设置了name="fade"后，我们的类名就变成了：

• fade-enter
• fade-enter-active
• fade-enter-to