必须用实现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></transition>，必须用 <transitiongroup></transitiongroup> ——这是 Vue 专为列表项增删设计的内置组件，能自动为每个新增/移除项分别触发进入和离开动画。
用 TransitionGroup 包裹 v-for 列表
<transitiongroup></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 个核心类可精简为三组（进入/离开共用部分）：
