Vue 的 <transition>
与 <transition-group>
把元素或片段的插入、删除、移动翻译成可预测的 CSS 类名序列,再交由浏览器的样式系统完成剩余工作。理解这两段序列如何产生、何时产生,是写出高性能、无抖动动画的关键。
一、 <transition>
的核心使命
<transition>
只关心 单一根节点 的出现(enter)与消失(leave)。
它通过对比新旧 VNode 来判断是否应该触发过渡:
- 旧 VNode 被销毁、新 VNode 首次出现 → 进入动画
v-show
从false → true
→ 进入动画v-show
从true → false
→ 离开动画
除此之外,任何"节点复用"场景(例如 key
不变、仅更新属性)都不会触发过渡。
二、类名生成的三层优先级
类名是 Vue 与样式系统之间的唯一契约。优先级从高到低依次为:
- 显式类名(通过
enter-class
、leave-active-class
等 prop 指定) - 动态前缀:若存在
name="fade"
,则序列以fade-enter
、fade-leave-to
开头 - 缺省前缀:没有
name
时,统一使用v-enter
、v-leave-to
等
这一设计允许你在全局样式与局部样式之间自由切换,而无需修改模板结构。
三、进入(enter)阶段的六拍节奏

当决定执行进入动画时,Vue 会在同一帧内完成以下步骤:
- 插入 DOM 节点(此时不可见) 2. 追加
v-enter
与v-enter-active
- 强制 reflow(读取
offsetHeight
或调用getComputedStyle
) - 移除
v-enter
、追加v-enter-to
,启动过渡 - 监听
transitionend
/animationend
- 事件触发后移除所有过渡类,动画结束
整个过程封装在 transition/transition.js
的 enter
钩子中,开发者无需手动管理时间轴。
四、离开(leave)阶段的镜像流程
离开动画与进入动画互为镜像,但多了一个额外细节:节点必须在动画完成后才真正从 DOM 移除。

因此 Vue 会:
- 追加
v-leave
与v-leave-active
- 下一帧移除
v-leave
、追加v-leave-to
- 等待
transitionend
/animationend
- 确认事件触发后,才把节点从父元素中
removeChild
这保证了 CSS 过渡可以完整执行,而不会因为节点提前消失导致动画截断。
五、 <transition-group>
:列表的 FLIP 策略
当节点集合需要新增、删除、重排时,<transition-group>
介入。
它与 <transition>
的区别主要体现在三点:
- 多节点支持:不限制子节点数量,也不强制单一根节点
- 生命周期钩子扩展:额外提供
@move
事件,用于捕获元素位移 - FLIP 动画:基于 First-Last-Invert-Play 思想实现位置过渡
具体流程:
- First:记录所有节点初始位置(
getBoundingClientRect
) - Last:数据更新后,再次记录节点最终位置
- Invert:计算差值,立即通过
transform
把节点"拉回"原位 - Play:在下一帧移除
transform
,浏览器开始从"拉回"状态平滑过渡到真实位置
Vue 会把这段逻辑封装到 v-move
类名上,开发者只需给 .list-move
写一条 transition: transform .3s
即可。
六、常见误区与工程建议
- 误把
<transition>
包在v-for
外层:此时根节点是片段(Fragment),不满足"单一根节点"约束,动画不会触发。应改用<transition-group>
。 - 在
leave
阶段设置display: none
:这会立即中断过渡,导致节点瞬间消失。应改用opacity
或transform
做过渡。 - 忘记为列表项加唯一
key
:没有稳定key
,Vue 无法识别"新增 / 删除 / 移动",FLIP 动画将退化为普通插入删除。 - 过度使用 JS 钩子:
<transition>
提供的 JS 钩子(@before-enter
等)功能强大,但滥用会导致代码分散、调试困难。优先使用纯 CSS 方案,必要时再引入 JS 逻辑。
七、代码示例
vue
<template>
<button @click="toggle">Toggle</button>
<transition name="fade">
<p v-if="show">hello</p>
</transition>
<button @click="shuffle">Shuffle</button>
<transition-group name="list" tag="ul">
<li v-for="item in items" :key="item" class="list-item">
{{ item }}
</li>
</transition-group>
</template>
<style>
.fade-enter-active, .fade-leave-active {
transition: opacity .3s;
}
.fade-enter, .fade-leave-to {
opacity: 0;
}
.list-item {
transition: transform .3s;
}
.list-move {
transition: transform .3s;
}
</style>
点击 Toggle
观察单节点淡入淡出;点击 Shuffle
观察列表的 FLIP 位移动画。
结语
<transition>
与 <transition-group>
并不产生动画,它们只是把 DOM 生命周期事件翻译成 CSS 类名序列,并提供可靠的完成回调。真正让动画流畅的是开发者对类名规则、回流时机、FLIP 差值的精准把控。