Vue 3 transition轮播切换时过渡启动阶段闪烁问题如何解决

• 你使用对象作为:key的值，不符合Vue最佳实践，可能导致过渡触发时机异常，建议替换为carousel_2中唯一的基本类型属性（如id、idno）作为key。
• 混合使用left和transform做位移，且未给绝对定位的.workDiv-container设置初始left/top值，新元素挂载第一帧还未被添加slide-img-enter类时，会以默认left: 0的状态渲染，导致闪烁。
• 未配置<transition>的过渡模式，默认新旧元素过渡同时触发，进一步放大了闪烁问题。

方案1：修改过渡配置与样式（推荐） #

1. 替换key为基本类型值

<transition name="slide-img">
    <div :key="carousel_2.idno" class="workDiv-container">
    <!-- 内部内容不变 -->
    </div>
</transition>

2. 统一使用transform控制位移，给绝对定位元素设置初始位置：

/* 新增初始定位 */
.workDiv-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* 调整过渡类，移除left属性，统一用transform */
.slide-img-enter {
    transform: translateX(-100%);
}
.slide-img-enter-to {
    transform: translateX(0);
}
.slide-img-enter-active {
    transition: transform 2s ease;
}

.slide-img-leave {
    transform: translateX(0);
}
.slide-img-leave-to {
    transform: translateX(100%);
}
.slide-img-leave-active {
    transition: transform 2s ease;
}

3. 如果需要先滑出旧元素再滑入新元素，给transition添加mode="out-in"属性：

<transition name="slide-img" mode="out-in">

如果需要新旧元素同时滑动，不需要添加mode属性。

方案2：延迟渲染实现（符合你提到的延迟一个tick的需求） #

如果你的业务场景必须保留现有写法，可以通过拆分数据源更新时机实现延迟一个tick渲染：
因为carousel_2是计算属性，你可以给它加一个开关变量控制返回值：

// 新增响应式变量
data() {
  return {
    // 其他变量不变
    isSwitching: false
  }
},
computed: {
  carousel_2() {
    if (this.isSwitching) return null
    // 保留你原来的计算逻辑
    return this.yourOriginalData
  }
},
methods: {
  // 轮播切换触发方法
  switchCarousel() {
    this.isSwitching = true
    this.$nextTick(() => {
      // 更新计算属性依赖的原始数据源
      this.yourOriginalIndex += 1
      this.isSwitching = false
    })
  }
}

这样会先触发旧元素离开，下一帧再挂载新元素，避免同时渲染导致的闪烁。

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