必须用<TransitionGroup>实现v-for淡入淡出动画，需设tag属性和唯一响应式:key（推荐item.id）；CSS按.fade-enter-from/.fade-leave-to设opacity:0，.fade-enter-active/.fade-leave-active设transition:opacity 0.3s ease。
在 Vue 3 模板中为 v-for 列表实现淡入淡出过渡动画，不能直接对单个元素套 <Transition>，必须用 <TransitionGroup> ——这是 Vue 专为列表项增删设计的内置组件，能自动为每个新增/移除项分别触发进入和离开动画。
用 TransitionGroup 包裹 v-for 列表
<TransitionGroup> 必须设置 tag 属性（如 tag="ul" 或 tag="div"），否则会渲染成注释节点，导致样式或布局异常。同时，每个子元素必须有稳定、唯一、响应式的 :key，推荐使用数据项自身的 ID；若无 ID，可结合时间戳或索引（但仅用 index 在支持删除/排序时会导致动画错乱）：
-
✅ 正确写法（带唯一 key）：
<TransitionGroup name="fade" tag="ul" class="list"><br> <li v-for="item in list" :key="item.id">{{ item.name }}</li><br></TransitionGroup> -
❌ 避免写法（仅用 index）：
:key="index"—— 列表重排时 key 复用，动画会错位或丢失。
定义 fade 过渡的 CSS 类
Vue 会根据 name="fade" 自动查找对应类名。淡入淡出只需控制 opacity 和 transition，6 个核心类可精简为三组（进入/离开共用部分）：
-
.fade-enter-from, .fade-leave-to：设为opacity: 0 -
.fade-enter-to, .fade-leave-from：设为opacity: 1（通常可省略，默认即 1） -
.fade-enter-active, .fade-leave-active：统一加transition: opacity 0.3s ease，控制动画时长与缓动
确保列表变化由响应式数据驱动
动画只在 Vue 管理的响应式更新下生效。例如：
vue-composition-api-best-practices
下载
Vue 3 组合式 API 与 最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。
立即学习“前端免费学习笔记（深入）”；
- ✅ 使用
list.push(newItem)或list.splice(index, 0, newItem)新增项 - ✅ 使用
list.splice(index, 1)删除项 - ❌ 直接修改数组下标（
list[0] = {...}）或用list.length = 0清空 —— 这些操作不会触发TransitionGroup的 enter/leave 生命周期
补充：若需淡入 + 位移等组合效果
可在 -enter-from 和 -leave-to 中叠加其他属性，比如：
.fade-enter-from { opacity: 0; transform: translateY(10px); }.fade-enter-active { transition: all 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
注意：transform 和 opacity 同时过渡时，transition 要写成 all 或显式列出两者，避免遗漏。
