Nuxt 3.0.0及Nitro 1.0.0过渡/动画失效问题求助

核心结论 #

Nuxt 3.0.0 及 rc13+ 并未移除动画相关核心依赖，但路由过渡的实现逻辑在 rc13 版本后发生了破坏性调整，导致旧写法直接失效。

问题根源 #

rc12 及更早版本中，Nuxt 会默认在全局路由组件上自动注入过渡触发逻辑，无需额外配置就能生成enter/leave类；但从 rc13 开始，为了对齐 Vue 3 原生过渡 API 并提升自定义灵活性，默认全局过渡逻辑被移除，需要开发者显式声明过渡配置。

修复步骤 #

1. 显式配置页面过渡
   在app.vue或布局组件中，为<NuxtPage>添加transition属性：

   <template>
     <NuxtPage transition="page" />
   </template>
   

2. 适配 Vue 3 标准过渡类名
   旧版的enter/leave类名已不再生效，需改用 Vue 3 过渡系统的标准命名：

   .page-enter-from,
   .page-leave-to {
     opacity: 0;
     transform: translateX(20px);
   }
   .page-enter-active,
   .page-leave-active {
     transition: all 0.3s ease;
   }
   .page-enter-to,
   .page-leave-from {
     opacity: 1;
     transform: translateX(0);
   }
   

3. 全局统一配置（可选）
   如果需要给所有页面应用相同过渡效果，可在nuxt.config.ts中全局配置：

   export default defineNuxtConfig({
     app: {
       pageTransition: { name: 'page', mode: 'out-in' }
     }
   })
   

额外排查要点 #

• 检查app.vue是否正确挂载了<NuxtPage>组件，未遗漏核心路由出口
• 确认没有在nitro.config.ts中启用experimental.noScripts等禁用客户端脚本的配置
• 排查第三方 UI 库或自定义样式是否覆盖了过渡类的优先级

内容的提问来源于stack exchange，提问作者IT Time Programming