Vue内置动画组件 Transition

Vue 的 <transition><transition-group>把元素或片段的插入、删除、移动翻译成可预测的 CSS 类名序列,再交由浏览器的样式系统完成剩余工作。理解这两段序列如何产生、何时产生,是写出高性能、无抖动动画的关键。

一、 <transition> 的核心使命

<transition> 只关心 单一根节点 的出现(enter)与消失(leave)。

它通过对比新旧 VNode 来判断是否应该触发过渡:

  • 旧 VNode 被销毁、新 VNode 首次出现 → 进入动画
  • v-showfalse → true → 进入动画
  • v-showtrue → false → 离开动画

除此之外,任何"节点复用"场景(例如 key 不变、仅更新属性)都不会触发过渡。

二、类名生成的三层优先级

类名是 Vue 与样式系统之间的唯一契约。优先级从高到低依次为:

  1. 显式类名(通过 enter-classleave-active-class 等 prop 指定)
  2. 动态前缀:若存在 name="fade",则序列以 fade-enterfade-leave-to 开头
  3. 缺省前缀:没有 name 时,统一使用 v-enterv-leave-to

这一设计允许你在全局样式与局部样式之间自由切换,而无需修改模板结构。

三、进入(enter)阶段的六拍节奏

当决定执行进入动画时,Vue 会在同一帧内完成以下步骤:

  1. 插入 DOM 节点(此时不可见) 2. 追加 v-enterv-enter-active
  2. 强制 reflow(读取 offsetHeight 或调用 getComputedStyle
  3. 移除 v-enter、追加 v-enter-to,启动过渡
  4. 监听 transitionend / animationend
  5. 事件触发后移除所有过渡类,动画结束

整个过程封装在 transition/transition.jsenter 钩子中,开发者无需手动管理时间轴。

四、离开(leave)阶段的镜像流程

离开动画与进入动画互为镜像,但多了一个额外细节:节点必须在动画完成后才真正从 DOM 移除。

因此 Vue 会:

  1. 追加 v-leavev-leave-active
  2. 下一帧移除 v-leave、追加 v-leave-to
  3. 等待 transitionend / animationend
  4. 确认事件触发后,才把节点从父元素中 removeChild

这保证了 CSS 过渡可以完整执行,而不会因为节点提前消失导致动画截断。

五、 <transition-group>:列表的 FLIP 策略

当节点集合需要新增、删除、重排时,<transition-group> 介入。

它与 <transition> 的区别主要体现在三点:

  • 多节点支持:不限制子节点数量,也不强制单一根节点
  • 生命周期钩子扩展:额外提供 @move 事件,用于捕获元素位移
  • FLIP 动画:基于 First-Last-Invert-Play 思想实现位置过渡

具体流程:

  1. First:记录所有节点初始位置(getBoundingClientRect
  2. Last:数据更新后,再次记录节点最终位置
  3. Invert:计算差值,立即通过 transform 把节点"拉回"原位
  4. Play:在下一帧移除 transform,浏览器开始从"拉回"状态平滑过渡到真实位置

Vue 会把这段逻辑封装到 v-move 类名上,开发者只需给 .list-move 写一条 transition: transform .3s 即可。

六、常见误区与工程建议

  • 误把 <transition> 包在 v-for 外层:此时根节点是片段(Fragment),不满足"单一根节点"约束,动画不会触发。应改用 <transition-group>
  • leave 阶段设置 display: none:这会立即中断过渡,导致节点瞬间消失。应改用 opacitytransform 做过渡。
  • 忘记为列表项加唯一 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 差值的精准把控。

相关推荐
之梦2 分钟前
Electron + Vue3开源跨平台壁纸工具实战(八)主进程-核心功能
前端·electron
我叫黑大帅4 分钟前
从刷不到底的朋友圈说起:手把手教你搞懂 "下拉加载更多"
前端·javascript
前端服务区5 分钟前
Map与WeakMap
前端·javascript
用户3802258598246 分钟前
vue3源码解析:编译之编译器代码生成过程
前端·vue.js·源码阅读
Mintopia7 分钟前
🤖 接入 AI 服务之「OpenAI 篇」——一场与神经网络谈心的仪式
前端·javascript·aigc
晴殇i9 分钟前
前端视角下的单点登录(SSO)从原理到实战
前端·面试·trae
圆心角11 分钟前
深入解析协商缓存(弱缓存)
前端·浏览器
用户151865304138415 分钟前
从传统办公软件到云协作Flash Table AI分钟级生成表单,打造企业远程高效率办公的利器
前端·后端·前端框架
鹏北海21 分钟前
vue-route-query-hook:一个用于 Vue 3 的 Composable,提供响应式参数与 URL 查询参数之间的双向同步功能
前端·javascript·vue.js
VisuperviReborn32 分钟前
打造自己的前端监控---前端接口监控
前端·javascript·架构