Nuxt 3页面过渡时进入动画和离开动画同时触发怎么办？

Nuxt 3 的页面过渡动画同时触发进出，主要是因为 没有正确作用在路由视图上，而且你用的是 这种手动渲染方式，Vue 的 transition 是检测不到路由切换的“新旧组件”关系的。

推荐的做法是使用 Nuxt 提供的内置组件 ，它已经集成了对 Transition 的支持，并且能正确处理 out-in 模式。

把你的代码改成这样：

<template>

  <Transition

    mode="out-in"

    enter-active-class="duration-100 ease-out"

    leave-active-class="duration-100 ease-in"

  >

    <NuxtPage />

  </Transition>

</template>



<script setup>

// 不需要额外逻辑，NuxtPage 会自动响应路由变化

</script>

确保你在 app.vue 或布局文件中使用的是 而不是手动操作 $route。NuxtPage 是专门为页面过渡设计的，内部会管理好组件的插入时机，避免进出动画重叠。

另外，duration 设置为 100ms 可能太短了，视觉上容易闪，建议至少 200-300ms，比如加上 enter-from-class 和 leave-to-class 配合 Tailwind 的 opacity 类做渐变效果更顺滑：

<Transition

  mode="out-in"

  enter-active-class="transition-opacity duration-300 ease-out"

  enter-from-class="opacity-0"

  enter-to-class="opacity-100"

  leave-active-class="transition-opacity duration-300 ease-in"

  leave-from-class="opacity-100"

  leave-to-class="opacity-0"

>

  <NuxtPage />

</Transition>

这样就能保证离开动画完全结束后才开始进入动画，不会闪屏。手机端性能差一点，反而更能暴露这类问题，用标准方案就没啥大坑。

问题出在 直接套在 上，而 Nuxt 3 的布局和页面组件结构会干扰动画的执行顺序，特别是在手机上性能较低时更明显。

正确的做法是把 放在布局组件外面，或者用 自带的过渡功能，这样能确保页面组件的切换时机和动画同步。

下面是修改后的代码示例：

<template>

  <router-view v-slot="{ Component }">

    <transition

      mode="out-in"

      enter-active-class="duration-100 ease-out"

      leave-active-class="duration-100 ease-in"

    >

      <component :is="Component" />

    </transition>

  </router-view>

</template>

或者直接使用 ：

<template>

  <NuxtPage />

</template>



<script setup>

definePage({

  transition: {

    name: 'custom-transition',

    mode: 'out-in',

    enterClass: 'duration-100 ease-out',

    leaveClass: 'duration-100 ease-in'

  }

})

</script>

这样可以确保页面组件的切换逻辑在 Vue Router 控制之下，动画顺序不会错乱。另外，手机端性能较弱时，建议把动画时长控制在 150ms 以内，避免用户感知到卡顿或闪屏。