Vue 3 Transition Group数据不显示问题及解决方法咨询

常见触发原因 #

• 子元素未绑定唯一key
  Transition Group完全依赖key追踪元素身份，缺少该属性时，Vue无法识别数组变化，直接导致元素不渲染或过渡失效。
• Vue3过渡类名用错
  Vue3将过渡类的-enter/-leave调整为-enter-from/-leave-to，若仍沿用Vue2的类名规则，元素会一直处于隐藏状态。
• 数据更新方式非响应式
  轮播切换时直接修改数组下标（如slides[0] = newItem），Vue无法检测到数据变化，Transition Group不会触发视图更新。
• 容器布局设置不当
  轮播需父容器配置overflow: hidden+绝对定位，Transition Group默认渲染为<span>标签，未设置tag="div"并添加定位的话，元素会出现布局错乱或被溢出隐藏。

对应解决办法 #

• 强制绑定唯一key
  给v-for循环的子元素绑定唯一标识，尽量避免用索引作为key（数组顺序变化时易出问题）：

<TransitionGroup tag="div" name="carousel">
  <div v-for="slide in activeSlides" :key="slide.id" class="slide">
    {{ slide.text }}
  </div>
</TransitionGroup>

• 修正过渡CSS样式
  遵循Vue3的过渡类名规则编写样式，若过渡名为carousel：

.carousel-enter-active, .carousel-leave-active {
  transition: transform 0.6s ease;
}
.carousel-enter-from, .carousel-leave-to {
  transform: translateX(100%);
}
.carousel-leave-from {
  transform: translateX(0);
}

• 用响应式方法更新数据
  轮播切换时使用Vue响应式数组方法（splice/push/shift），或直接替换整个数组：

const nextSlide = () => {
  const firstItem = slides.value.shift();
  slides.value.push(firstItem);
};

• 调整布局样式
  给轮播容器和Transition Group添加定位，保证轮播项重叠显示：

<div class="carousel-wrap" style="position: relative; width: 400px; height: 300px; overflow: hidden;">
  <TransitionGroup tag="div" name="carousel" style="position: absolute; width: 100%;">
    <!-- 轮播项 -->
  </TransitionGroup>
</div>

额外提醒 #

如果你的轮播是单元素切换（每次仅显示一张），使用普通<Transition>组件即可，Transition Group更适合多元素并存的列表过渡场景，避免组件误用。

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