Vue基础教程（139）过渡和动画效果之单元素/组件的过渡中的CSS 过渡：别愣着了！让你的网页元素“动”起来——Vue过渡效果深度揭秘

一、为什么你的网站需要“过渡治疗”？

想象一下这个场景：你走进一家高级餐厅，服务员突然把盘子“砰”地砸在你面前——就算菜品再美味，体验也大打折扣。现在回想一下你的网站，是不是也在这样粗暴地对待用户？按钮“啪”一下出现，弹窗“唰”一下消失，整个页面僵硬得像冻了三天的面包。

别急，Vue早就为你准备了解决方案！Vue的过渡系统，就像是给网站请了一位专业的米其林服务员，让每个元素的进场退场都变得优雅自然。今天，我们就来深度剖析其中最基础也最实用的部分——单元素/组件的CSS过渡。

二、Transition标签：Vue的隐形动画导演

先来看一个灵魂拷问：当你在Vue里用v-if或v-show控制元素显示隐藏时，发生了什么？

普通青年的做法：

<div v-if="isShowing">我会突然蹦出来吓人！</div>

Vue过渡青年的做法：

<transition>
  <div v-if="isShowing">我会优雅地淡入淡出~</div>
</transition>

这个看似普通的<transition>标签，实际上是个深藏不露的“动画导演”。它在背后默默做了这些事：

1. 自动嗅探：智能检测子元素是否应用了CSS过渡或动画
2. 时机大师：精准掌握动画开始和结束的时机
3. 类名指挥家：在恰当的时机添加/删除特定的CSS类名
4. 钩子触发器：在动画各阶段触发对应的JavaScript钩子

三、六大CSS类名：过渡动画的“梦之队”

Vue为过渡效果准备了六个核心CSS类名，它们像一支训练有素的团队，各司其职：

1. v-enter：元素“入职”前的准备状态

.v-enter {
  opacity: 0; /* 完全透明 */
  transform: translateX(100px); /* 从右侧100px位置开始 */
}

想象这是演员上台前的候场状态——已经就位，但观众还看不见。

2. v-enter-active：入场动画的执行过程

.v-enter-active {
  transition: all 0.5s ease-out; /* 所有属性变化都用0.5秒缓动 */
}

这是入场动画的“导演指令”，定义了动画的时长、缓动函数等关键参数。

3. v-enter-to：入场动画的终点状态