TransitionGroup 仅响应列表项增删或顺序变化，而轮播图通常只更新当前索引，不改变数组本身，因此需改用普通 <transition> 配合 v-if 控制单张图片显隐，并修正 CSS 过渡类名（如 .slide-enter-from）。
transitiongroup 仅响应列表项增删或顺序变化，而轮播图通常只更新当前索引，不改变数组本身，因此需改用普通 `
在 Vue 中为轮播图添加平滑的左右滑动动画时，一个常见误区是误用 <transition-group>。正如你在 CodeSandbox 中所写，你使用了 v-for 渲染全部图片，并通过绝对定位将它们层叠显示——此时 DOM 中始终存在所有 <img> 元素，仅靠切换 currentImage 的值不会触发 TransitionGroup 的 enter/leave 生命周期，因为它检测不到数组内容的变化（items 未增删、未重排）。
✅ 正确做法：用单个 <transition> 包裹条件渲染的图片，配合 v-if 精确控制当前激活项的显隐：
<template>
<div class="sliderComponent">
<!-- 关键修改：用 v-if + transition 替代 transition-group + v-for -->
<transition name="slide">
<img
v-if="items.length"
:src="items[currentSlideIndex]"
:alt="`Slide ${currentSlideIndex + 1}`"
class="slideImage"
key="current-slide" <!-- key 确保 Vue 正确识别元素身份 -->
/>
</transition>
<div class="controls">
<button class="prev" @click="prevSlide" aria-label="Previous slide">◀</button>
<button class="next" @click="nextSlide" aria-label="Next slide">▶</button>
</div>
</div>
</template>? CSS 动画类名必须严格遵循 Vue 3 的命名规范（Vue 2 与 Vue 3 类名略有差异）：
Vue Composition Analyzer
下载
分析 Vue 3 Composition API 使用情况——审计响应式模式、可组合函数设计、ref 与 reactive 的选择、计算属性、watcher 使用及组件……
- .slide-enter-active / .slide-leave-active：定义过渡过程（含 transition 属性）
- .slide-enter-from / .slide-leave-to：定义初始/结束状态（Vue 3 使用 -from 和 -to 后缀）
.slideImage {
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
}
/* Vue 3 transition class names */
.slide-enter-active,
.slide-leave-active {
transition: transform 0.5s ease-in-out;
}
.slide-enter-from {
transform: translateX(100%);
}
.slide-enter-to {
transform: translateX(0);
}
.slide-leave-from {
transform: translateX(0);
}
.slide-leave-to {
transform: translateX(-100%);
}⚠️ 注意事项：
立即学习“前端免费学习笔记（深入）”；
- 不要给 <img> 设置 key 为 index：若 items 可能动态增删，应使用唯一标识（如 item.id），但此处轮播图推荐固定 key="current-slide"，确保每次切换都视为新元素进入。
- 确保 currentSlideIndex 是响应式数据：在 setup() 或 data() 中正确定义，并在 prevSlide/nextSlide 中正确更新（注意边界处理，如循环切换：currentSlideIndex = (currentSlideIndex - 1 + items.length) % items.length）。
- 避免 v-for 冗余渲染：原代码中每个 item 都渲染相同 currentImage，不仅无意义，还增加 DOM 负担和样式干扰。
? 总结：轮播图动画的本质是「当前项退出 → 新项进入」，这属于单元素条件切换，而非列表批量变更。因此优先选择 <transition> + v-if，语义清晰、性能更优、动画可控性强。TransitionGroup 应留给真实需要列表排序、拖拽重排或批量增删的场景。
