Vue 教程：过渡与动画的进阶技巧——列表过渡与状态过渡

快速概述

在 Vue 应用中，列表的增删排序与数值状态的动态变化往往生硬突兀，影响交互体验。列表过渡与状态过渡正是为解决此类问题而生：前者通过 transition-group 组件为列表项添加平滑的进入、离开与移动动画，后者则借助数值动画让数据变化直观可见。适用于购物车增减、消息列表刷新、数据仪表盘等场景。前置要求：熟悉 Vue 基础指令（如 v-for）与 CSS 过渡属性，并已引入 Vue 2.x 或 Vue 3.x 环境。

核心概念与原理

列表过渡的核心是 transition-group 组件。与单个元素的 transition 不同，它会渲染一个真实 DOM 元素（默认 span），并对内部所有子元素统一管理过渡类名。当列表项被添加或移除时，Vue 自动为其附加 v-enter、v-leave 等类名；当列表顺序变化时，通过 FLIP 技术（First Last Invert Play）计算元素位置偏移并触发移动动画。appear 属性控制首次渲染时的入场动画，tag 属性则指定渲染的标签名（如 ul、li），确保语义化结构正确。

状态过渡则利用 Vue 的响应式系统与 watch 侦听器：监听数值变化后，在动画帧中逐步更新显示值，配合 CSS 过渡或第三方动画库（如 GSAP）实现数字滚动效果。

实战步骤与代码

步骤一：搭建基础列表

<div id="app">
  <ul>
    <li v-for="item in list" :key="item.id">{{ item.name }}</li>
  </ul>
</div>
<script> new Vue({ el: '#app', data: { list: [ { id: 1, name: '苹果' }, { id: 2, name: '香蕉' } ] } }) </script>

注意：:key 必须绑定唯一标识（如 id），这是动画正确追踪元素的前提。

步骤二：引入 transition-group 并添加样式

<transition-group name="list" tag="ul" appear>
  <li v-for="item in list" :key="item.id">{{ item.name }}</li>
</transition-group>
<style> /* 入场与离场动画 */ .list-enter-active, .list-leave-active { transition: all 0.8s ease; } .list-enter, .list-leave-to { opacity: 0; transform: translateX(30px); } /* 移动动画：列表重排时平滑过渡 */ .list-move { transition: transform 0.8s ease; } /* 鼠标悬停效果 */ li:hover { background-color: aquamarine; transition: all 0.8s ease; } </style>

此处 name="list" 决定了类名前缀；tag="ul" 让组件渲染为 ul 标签；appear 使页面加载时列表项也有入场动画。

步骤三：实现添加与删除动画

methods: {
  addItem() {
    const id = Date.now(); // 生成唯一 id
    this.list.push({ id, name: '新项目 ' + id });
  },
  removeItem(index) {
    this.list.splice(index, 1); // 触发离开动画
  }
}

当数据被 push 或 splice 时，Vue 自动为对应列表项添加进入或离开过渡类，无需手动操作 DOM。

步骤四：状态过渡——数字滚动动画

<div>{{ animatedNumber }}</div>
<script> data: { number: 0, animatedNumber: 0 }, watch: { number(newVal) { // 使用 requestAnimationFrame 平滑过渡 const step = () => { if (this.animatedNumber < newVal) { this.animatedNumber++; requestAnimationFrame(step); } }; step(); } } </script>

通过侦听 number 的变化，逐帧递增 animatedNumber，实现数字从旧值滚动到新值的视觉效果。

常见坑点与优化

• key 缺失或重复：未绑定 :key 或使用数组索引会导致动画错乱，务必使用唯一 id。
• transition-group 默认渲染 span：若未设置 tag，组件会渲染为 span 包裹 li，造成非法嵌套。请显式指定 tag="ul" 等语义化标签。
• 离开动画失效：列表项被移除时，若父容器未设置 position: relative，绝对定位的离开元素可能跳动。可配合 list-leave-active 中的 position: absolute 解决。
• 性能优化：大量列表项同时动画时，优先使用 transform 与 opacity 属性（GPU 加速），避免触发重排的 width、height 动画；对复杂场景可考虑使用 v-move 类配合 FLIP 减少计算开销。
• 状态过渡的精度问题：数字滚动若需小数或大数值，应使用差值百分比递增而非固定步长，避免动画时长失真。