Vue Academy · 课时

使用 TransitionGroup 实现列表动画

Q: 「使用 TransitionGroup 实现列表动画」这节课中我会学到什么？

为 v-for 列表添加动画、移动过渡，以及带延迟的交错动画。 你通过在浏览器中直接运行的动手代码来练习 Vue Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

为 v-for 列表添加动画、移动过渡，以及带延迟的交错动画。

使用 TransitionGroup 实现列表动画 是 CoddyKit 上的免费 Vue Academy 课时。这是第 4 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 Vue Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Vue Academy 课程共包含 4 节课。

为列表制作动画

<Transition> 用于处理单个元素。对于使用 v-for 渲染的列表，请使用 <TransitionGroup>，它可以在项目添加、删除和重新排序时为项目制作动画。

标签属性

与 Transition 不同，TransitionGroup 可以渲染真实的包裹元素。传入 tag="ul"（或任意标签）后，它会在列表项目外输出该元素。

<TransitionGroup name="list" tag="ul">
  <li v-for="item in items" :key="item.id">
    {{ item.text }}
  </li>
</TransitionGroup>

每个项目都需要一个键

每个项目都必须有唯一的 :key。Vue 使用它跟踪哪些项目发生了移动、进入或离开。对于带动画的列表，绝不要使用数组索引作为键。

<li v-for="item in items" :key="item.id">{{ item.text }}</li>

进入和离开类

TransitionGroup 使用与 Transition 相同的进入和离开类。请为每个项目的出现和移除定义这些类。

.list-enter-from,
.list-leave-to {
  opacity: 0;
  transform: translateX(30px);
}
.list-enter-active,
.list-leave-active {
  transition: all 0.3s ease;
}

特殊的移动类

其中最突出的功能是 -move 类（例如 list-move）。当项目重新排序时，Vue 会使用变换过渡，让每个项目平滑地移动到新位置。

.list-move {
  transition: transform 0.4s ease;
}

FLIP 技术

-move 背后使用的是 FLIP：F首先记录旧位置，L然后读取新位置，I通过变换进行反转，使元素看起来没有移动，最后P移除变换来播放动画。Vue 会自动完成这些操作。

/* Vue computes: translate(oldX - newX) then animates to 0 */

离开的项目需要绝对定位

正在移除的元素仍会占据空间，这可能破坏相邻项目的移动动画。请在 leave-active 类上设置 position: absolute，使离开的项目脱离布局流。

.list-leave-active {
  position: absolute;
}

可排序列表示例

组合使用进入、离开和移动类后，Vue 就能同时为插入、移除和重新排序制作动画。

function shuffle() {
  items.value = items.value
    .slice()
    .sort(() => Math.random() - 0.5);
}

使用 transitionDelay 实现错峰效果

如果想让项目依次出现，可以根据项目索引绑定内联 transition-delay。每个项目都会比前一个项目多等待一小段时间。

<li
  v-for="(item, i) in items"
  :key="item.id"
  :style="{ transitionDelay: i * 50 + 'ms' }"
>
  {{ item.text }}
</li>

使用 JS 钩子实现错峰效果

对于由数据驱动的错峰效果，您也可以使用 JS 钩子和数据索引属性，让每个 onEnter 根据元素索引延迟执行。

function onEnter(el, done) {
  const delay = el.dataset.index * 50;
  setTimeout(() => {
    el.style.opacity = 1;
    done();
  }, delay);
}

性能说明

FLIP 会为 transform 制作动画，这对 GPU 很友好。请合理控制列表大小，并优先使用变换和透明度，而不是宽度或顶部位置等会触发布局计算的属性，从而实现流畅的 60 帧/秒动画。

快速检查

list-move 类可以实现什么效果？

回顾

您学习了用于列表的 <TransitionGroup>：使用 tag 渲染包裹元素，为每个项目提供唯一的 :key，使用进入和离开类，并结合 -move 类实现基于 FLIP 的重新排序动画，为离开的项目设置绝对定位，还可以使用基于索引的 transitionDelay 创建错峰效果。

常见问题解答

「使用 TransitionGroup 实现列表动画」课时是免费的吗？

是的 — 「使用 TransitionGroup 实现列表动画」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Vue Academy 课程的其余内容，请升级到 CoddyKit PRO。 Vue Academy 课程共包含 4 节课。

「使用 TransitionGroup 实现列表动画」这节课中我会学到什么？

为 v-for 列表添加动画、移动过渡，以及带延迟的交错动画。你通过在浏览器中直接运行的动手代码来练习 Vue Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Vue Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 Vue Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 4 节课，共 4 节。

「使用 TransitionGroup 实现列表动画」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 Vue Academy 课中编写并运行代码吗？

能。每节 Vue Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

Transition 组件
CSS 过渡与动画
JavaScript 过渡钩子
使用 TransitionGroup 实现列表动画

← 返回 Vue Academy