Vue 中使用 TransitionGroup 实现轮播图动画失效的解决方案-js教程-PHP中文网

Vue 中使用 TransitionGroup 实现轮播图动画失效的解决方案

TransitionGroup 仅响应列表项增删或顺序变化，而轮播图通常只更新当前索引，不改变数组本身，因此需改用普通配合 v-if 控制单张图片显隐，并修正 CSS 过渡类名（如 .slide-enter-from）。

transitiongroup 仅响应列表项增删或顺序变化，而轮播图通常只更新当前索引，不改变数组本身，因此需改用普通 `` 配合 `v-if` 控制单张图片显隐，并修正 css 过渡类名（如 `.slide-enter-from`）。

在 Vue 中为轮播图添加平滑的左右滑动动画时，一个常见误区是误用。正如你在 CodeSandbox 中所写，你使用了 v-for 渲染全部图片，并通过绝对定位将它们层叠显示——此时 DOM 中始终存在所有元素，仅靠切换 currentImage 的值不会触发 TransitionGroup 的 enter/leave 生命周期，因为它检测不到数组内容的变化（items 未增删、未重排）。

✅ 正确做法：用单个包裹条件渲染的图片，配合 v-if 精确控制当前激活项的显隐：

<template><div class="sliderComponent">
    <!-- 关键修改：用 v-if + transition 替代 transition-group + v-for -->
    <transition name="slide">
      @@##@@
      />
    </transition><div class="controls">
      <button class="prev" aria-label="Previous slide">◀</button>
      <button class="next" aria-label="Next slide">▶</button>
    </div>
  </div>
</template>

? CSS 动画类名必须严格遵循 Vue 3 的命名规范（Vue 2 与 Vue 3 类名略有差异）：