Vue 单文件组件怎么使用 TransitionGroup 列表动画-Vue.js-PHP中文网

是 Vue 处理列表动画的核心内置组件，专为 v-for 渲染的多个元素设计，使用时需确保结构正确、key 唯一、样式匹配、容器语义合理。

vue 单文件组件怎么使用 transitiongroup 列表动画

`` 是 Vue 处理列表动画的核心内置组件，专为 `v-for` 渲染的多个元素设计。在单文件组件（SFC）中使用它，关键在于结构正确、key 唯一、样式匹配、容器语义合理。下面直接说清楚怎么用。

必须写对的结构要点

在 `.vue` 文件的 `

常见错误：漏写 `key`、用索引 `index` 当 key、把 `key` 写在 `` 上（应写在内部 `v-for` 元素上）。

✅ 正确：{{ item.text }}
❌ 错误：（索引不稳定，增删时 key 会错位）
❌ 错误：（key 应在子元素上）




控制容器标签与语义化
`` 默认渲染为一个 ``，但列表通常需要 `
`、`` 或 `` 等语义化容器。用 `tag` 属性指定即可：



tag="ul" → 渲染为无序列表，适合待办项、菜单等
  
tag="div" → 渲染为块级容器，适合网格、卡片流
  
tag="section" → 语义更明确，无障碍友好

注意：`tag` 不影响动画逻辑，只改变外层 DOM 结构，不影响内部元素的 enter/leave 动画类名应用位置。

写对 CSS 类名才能动起来
动画类名前缀由 `name` 属性决定（如 `name="list"` → 类名是 `.list-enter-active`）。必须定义至少三组规则：

											
												
												
													蓝湖代码转vue2.0+element-ui
													将静态 Vue 页面(index.vue)改造为动态页面(Custom.vue)；稿源仅限 index.vue、其引用的 CSS 与资源路径，禁止参考仓库内其他文件。Invoke when user wants to transform a static Vue page into a dynamic data-driven page with Element UI components.
												
												下载
												
											
										


.list-enter-active, .list-leave-active：声明过渡持续时间、缓动函数（如 transition: all 0.3s ease）
  
.list-enter-from, .list-leave-to：定义起始/结束状态（如 opacity: 0; transform: translateY(10px)）
  
.list-move（推荐加）：解决排序或中间插入时其他项“跳动”问题，加了就能平滑位移（如 transition: transform 0.3s ease）

⚠️ 注意：`.list-enter-to` 和 `.list-leave-from` 一般不用显式写，Vue 会自动补全；重点是 `-from` 和 `-to` 的状态 + `-active` 的过渡行为。

完整 SFC 示例（待办列表）
以下是一个可直接复制到 `.vue` 文件中运行的最小可用示例：
<template><div>
    <input v-model="newText" placeholder="输入任务"><button>添加</button>
    <transitiongroup tag="ul" name="list" class="task-list"><li v-for="task in tasks" :key="task.id" class="task-item">
        {{ task.text }}
        <button>×</button>
      </li>
    </transitiongroup>
</div>
</template><script setup>
import { ref } from 'vue'
const newText = ref('')
const tasks = ref([
  { id: 1, text: '学习 Vue 响应式' },
  { id: 2, text: '掌握 TransitionGroup' }
])
let nextId = 3

const add = () => {
  if (!newText.value.trim()) return
  tasks.value.push({ id: nextId++, text: newText.value.trim() })
  newText.value = ''
}

const remove = (id) => {
  tasks.value = tasks.value.filter(t => t.id !== id)
}
</script><style scoped>
.task-list {
  margin-top: 16px;
  padding: 0;
  list-style: none;
}
.task-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  background: #f9f9f9;
  margin-bottom: 4px;
  border-radius: 4px;
}
.list-enter-active,
.list-leave-active,
.list-move {
  transition: all 0.25s ease;
}
.list-enter-from,
.list-leave-to {
  opacity: 0;
  transform: translateX(-10px);
}
</style>

不复杂但容易忽略