<TransitionGroup> 列表进出场过渡
最后更新：2026-10-22
<TransitionGroup> 列表进出场过渡
| 分组 | 内置组件与元素 |
|---|---|
| 类型 | 组件/元素 |
| 作用域 | 模板 |
| Vue 版本 | 3.0+ |
| SSR 支持 | 支持 |
📝 语法
<TransitionGroup name="list" tag="ul">
<li v-for="item in items" :key="item.id">{{ item.text }}</li>
</TransitionGroup>
.list-move { transition: transform .4s }⚙️ 参数
| props | tag（渲染成什么标签，默认不渲染容器）/ name / move-class / appear |
|---|
▶ 示例
修改下面的代码，在预览区实时查看效果：
输出：
新增列表项逐个出现，已有项平滑让位。💡 要点
⚠️ 注意 每一项必须有唯一 key：没有 key 无法计算位置移动。
ℹ️ 说明 移动过渡用插入的 .move 类（配合 name 前缀）；需要 transition 或 animation 才能生效。
💡 提示 tag="ul" 渲染真实列表容器；不指定 tag 时不渲染额外元素。
🏷️ 相关内置组件与元素
💡 相关案例
更多案例即将上线。
📚 相关教程
❓ 常见问题
Q 和 Transition 的区别？
A Transition 管单个元素进出；TransitionGroup 管列表增删与移动。
Q 没有移动动画？
A 检查是否写了 .move 过渡规则，以及 key 是否唯一。
Q 能同时做出场和移动吗？
A 可以，入场与移动会并行计算，必要时用 move-class 调整。
