Vue轮播切换动画异常：点击prev/next出现异常行为求助

你的代码主要有三个核心问题导致动画异常：

• 每个轮播项单独包裹<transition>，导致新旧元素的过渡无法协同，旧元素消失后新元素才出现，没有过渡的重叠阶段
• v-for的key用了不存在的slide.id，Vue无法正确追踪元素变化，过渡逻辑混乱
• 方向变量back和索引更新同步执行，Vue异步DOM更新的特性会导致过渡名称没及时生效

下面是修正后的完整代码，以及关键修改说明：

修正后的代码 #

<template>
  <div class="h-[100px] overflow-hidden w-full relative">
    <!-- 单个transition包裹轮播内容，用currentIndex作为key触发过渡 -->
    <transition :name="transitionName">
      <div 
        class="h-[100px] w-full absolute bg-blue-500" 
        :key="currentIndex"
      >
        {{ slides[currentIndex].name }}
      </div>
    </transition>
  </div>
  
  <div class="flex flex-row gap-x-2 mt-4">
    <button @click="moveSlide(-1)">prev</button>
    <button @click="moveSlide(1)">next</button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      slides: [
        {name:'akml;ll;m;l'},
        {name:'bwerrrrrrrrrrrr'},
        {name:'werwerwrwwrc'}
      ],
      transitionName: 'slide',
      currentIndex: 0
    }
  },
  methods: {
    moveSlide(offset) {
      // 先设置对应方向的过渡名称
      this.transitionName = offset < 0 ? 'slideback' : 'slide'
      // 计算新索引，处理循环边界
      let tempIndex = this.currentIndex + offset
      this.currentIndex = tempIndex >= this.slides.length 
        ? 0 
        : tempIndex < 0 
          ? this.slides.length - 1 
          : tempIndex
    },
  },
}
</script>

<style scoped>
/* 正向切换动画 */
.slide-leave-active,
.slide-enter-active {
  transition: transform 1s ease;
}
.slide-enter-from {
  transform: translateX(100%);
}
.slide-leave-to {
  transform: translateX(-100%);
}

/* 反向切换动画 */
.slideback-leave-active,
.slideback-enter-active {
  transition: transform 1s ease;
}
.slideback-enter-from {
  transform: translateX(-100%);
}
.slideback-leave-to {
  transform: translateX(100%);
}
</style>

关键修改点说明 #

1. 统一过渡容器：把<transition>移到外层，用currentIndex作为内容的key，这样每次切换索引时，Vue会同时渲染新旧两个元素，保证过渡动画的协同执行。
2. 修复key值问题：去掉无效的slide.id，改用currentIndex作为key，确保Vue能正确识别元素变化，触发过渡。
3. 明确过渡名称：把back布尔值改成直接存储过渡名称的transitionName，逻辑更清晰，避免异步更新导致的名称不匹配。
4. 规范过渡类名：用Vue 3标准的enter-from替代旧的enter（如果用Vue 2，改回enter即可），明确过渡的起始状态。

内容的提问来源于stack exchange，提问作者JoshJohnson