Nuxt3页面淡入淡出过渡仅单页生效问题求助

问题根源 #

你的配置存在三个核心问题：全局过渡配置与页面单独配置冲突、Vue3过渡类名写法错误、mode: 'out-in'适配逻辑不匹配。

修复步骤 #

1. 移除页面中的单独过渡配置 #

既然已经在nuxt.config.js里全局设置了pageTransition，页面里再单独声明transition: 'fade'会触发配置冲突，直接删掉所有页面中的这段脚本：

<script>
  export default {
    transition: 'fade'
  };
</script>

2. 修正CSS过渡类名（适配Vue3） #

Vue3的过渡类名和Vue2有差异，你用的是Vue2的写法，导致过渡效果无法正确触发。把app.vue里的样式改成下面的：

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

• fade-enter-from对应进入过渡的起始状态
• fade-leave-to对应离开过渡的结束状态

3. 正确配置全局过渡（可添加mode: 'out-in'） #

现在可以放心在nuxt.config.js里添加mode: 'out-in'，修改后的配置如下：

app: {
  head: {
    // ...你的head配置
  },
  pageTransition: {
    name: "fade",
    mode: "out-in",
    type: "transition"
  }
}

问题原因解释 #

• 重复配置冲突：全局pageTransition和页面单独的transition选项写法不兼容，导致只有About页因渲染顺序巧合生效，进入后缓存了过渡状态才让后续页面生效。
• 类名错误：Vue2的fade-enter在Vue3里要改为fade-enter-from，错误的类名导致过渡效果无法触发，添加mode: 'out-in'后，旧类名让元素无法正常显示，直接出现空白。

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