Nuxt 3（Vue.js 3）组件过渡效果失效问题排查求助

你的过渡效果没生效，核心问题是CSS过渡类的写法不符合Vue3（Nuxt3基于Vue3）的规范，另外过渡组件的key设置也有冗余。以下是修复步骤：

修正模板代码 #

移除<transition>标签上的:key，因为内部的QuestionsWrap已经通过:key="currentScreenIndex"触发组件切换，外层加key会干扰过渡逻辑：

<template>
  <div>
    <!-- 其他HTML内容 -->
    <transition name="slide-right" mode="out-in">
      <QuestionsWrap :question="questionScreens[currentScreenIndex]" :key="currentScreenIndex" />
    </transition>
    <!-- 其他HTML内容 -->
  </div>
</template>

修正样式代码 #

Vue3的过渡需要明确定义起始状态（-from）和结束状态（-to），只设置-active类无法触发过渡动画。同时添加定位规则避免布局跳动：

<style scoped>
/* 进入过渡：从右侧滑入 */
.slide-right-enter-from {
  transform: translateX(100%); /* 初始位置：完全在视口右侧 */
}
.slide-right-enter-to {
  transform: translateX(0); /* 结束位置：正常显示 */
}
.slide-right-enter-active {
  transition: all 0.5s ease-out; /* 动画过程 */
}

/* 离开过渡：向左滑出 */
.slide-right-leave-from {
  transform: translateX(0); /* 初始位置：正常显示 */
}
.slide-right-leave-to {
  transform: translateX(-100%); /* 结束位置：完全在视口左侧 */
}
.slide-right-leave-active {
  transition: all 0.5s ease-out; /* 动画过程 */
  position: absolute; /* 让离开组件不占空间，避免布局跳动 */
}

/* 给过渡容器加相对定位，作为绝对定位的参照 */
div:has(> .slide-right) {
  position: relative;
}
</style>

关键说明 #

1. Vue3过渡类规则：必须通过[name]-enter-from、[name]-enter-to定义过渡的前后状态，-active类仅控制动画的时长和曲线。
2. 外层<transition>不需要加key：内部组件的key已经足够触发组件销毁/重建，从而触发过渡。
3. 定位处理：给离开组件加position: absolute，配合容器的相对定位，能让新旧组件在同一位置重叠过渡，避免切换时页面布局跳动。

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