从Vite迁移至Nuxt后首屏加载过渡动画失效问题求助

我正在把Vue网站从Vite迁移到Nuxt，重构代码时遇到了过渡动画的问题。之前在Vite里，用<Transition>包裹<router-view>就能实现包括首屏加载在内的过渡效果，但迁移到Nuxt后，不管是在配置里设置pageTransition，还是用<Transition>包裹<NuxtPage>，都只有页面切换时动画生效，首屏加载完全没反应。我希望不管打开哪个页面，首屏都能触发这个过渡动画，该怎么解决？

我的Nuxt配置代码：

import tailwindcss from '@tailwindcss/vite'

export default defineNuxtConfig({
  compatibilityDate: '2024-11-01',
  devtools: { enabled: true },
  css: ['./assets/css/main.css'],
  app: {
    pageTransition: { name: 'pageFade', mode: 'in-out' },
  },

  modules: ['@nuxt/eslint', '@vueuse/nuxt'],
  vite: {
    plugins: [tailwindcss()],
  }
})

解决方案 #

方法1：通过根布局手动触发过渡 #

Nuxt默认不会给首屏渲染触发过渡，因为没有路由切换的动作。可以在根布局里通过状态控制，强制让首屏渲染时触发过渡：

1. 修改layouts/default.vue，用<Transition>包裹<NuxtPage>，并延迟渲染页面组件：

<template>
  <div>
    <Transition name="pageFade" mode="in-out">
      <NuxtPage v-if="isMounted" />
    </Transition>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'

const isMounted = ref(false)

onMounted(() => {
  // 挂载后延迟0毫秒触发，确保过渡生效
  setTimeout(() => {
    isMounted.value = true
  }, 0)
})
</script>

2. 确保你的CSS过渡样式已经正确定义（比如在assets/css/main.css里）：

/* 首屏和页面切换的过渡样式 */
.pageFade-enter-from {
  opacity: 0;
  transform: translateY(20px);
}

.pageFade-enter-active {
  transition: opacity 0.5s ease, transform 0.5s ease;
}

方法2：利用路由中间件标记首屏加载 #

通过中间件给首屏路由添加元信息，然后在布局里根据这个标记启用过渡的appear属性：

1. 创建middleware/force-first-transition.ts文件：

export default defineNuxtRouteMiddleware((to) => {
  // 仅在客户端首屏加载时添加标记
  if (process.client && !window.__NUXT_FIRST_LOAD__) {
    window.__NUXT_FIRST_LOAD__ = true
    to.meta.forceTransition = true
  }
})

2. 在nuxt.config.ts里全局注册这个中间件：

export default defineNuxtConfig({
  // ...其他原有配置
  router: {
    middleware: ['force-first-transition']
  }
})

3. 修改根布局，根据路由元信息启用过渡的appear属性：

<template>
  <Transition
    name="pageFade"
    mode="in-out"
    :appear="route.meta.forceTransition"
  >
    <NuxtPage />
  </Transition>
</template>

<script setup>
const route = useRoute()
</script>

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