Vue基础教程（141）过渡和动画效果之单元素/组件的过渡中的CSS动画：让你的元素“动”起来，告别“闪现”的尴尬

你是不是也厌倦了静态页面那种“直来直去”的生硬感？一个元素“唰”一下出现，又“啪”一下消失，未免太不给用户面子了。今天，咱们就深度扒一扒 Vue.js 基础教程里那个能让你的单元素或单组件“翩翩起舞”的利器——CSS动画与过渡。我保证，看完这篇，你写出来的动画效果，连设计师都要给你竖大拇指！

---

想象一下，你是一个元素，正待在网页这个舞台上。Vue 让你登场，你就“唰”地一下凭空出现；让你下场，你就“噗”地一声瞬间消失。是不是感觉很没面子？很没有仪式感？

别担心，Vue 早就为我们准备了一位贴心的大管家——<transition> 组件。它的任务，就是专门负责在元素“生命的转折点”（进入DOM和离开DOM）上，为我们安排好华丽的出场和退场动画，让一切变化都显得自然而优雅。

一、 “魔法”的核心：<transition> 组件是如何工作的？

你可以把 <transition> 组件理解成一个动画导演。它不会渲染成任何实际的DOM元素（像 div、span 那样），它只是一个无形的包装器，它的职责是：

1. 自动嗅探：它时刻监视着内部子元素的“生死存亡”。当你用 v-if、v-show、动态组件切换等方式控制一个元素的显示与隐藏时，它就知道：“哦，戏要开始了！”
2. 适时添加类名：在动画发生的不同时间点，这位导演会疯狂地给内部元素添加和删除一系列预设的CSS类名。比如 v-enter-from、v-enter-active 等等（这些名字我们待会儿细说）。
3. 给你舞台（钩子函数）：如果你觉得光用CSS不过瘾，想用JavaScript来编排更复杂的动画，这位导演还提供了“剧本”——也就是JavaScript钩子函数，如 @before-enter、@enter 等，让你能精准控制每一帧。

今天咱们的主角，是CSS动画。 所以，我们重点来盘一盘这位导演提供的那些“魔法类名”。

二、 必须认识的“六大名角”：CSS过渡的类名

当你的元素被包裹在 <transition> 里，并发生状态变化时，它会经历以下六个阶段，对应六个类名：

• 登场前（v-e