简单的 nuxt 3 转换仅适用于一页

Question

我在 Nuxt 3 中构建了我的个人作品集，我想添加简单的页面转换。尽管我遵循了 Nuxt 3 文档中的所有说明，但转换（“淡入淡出”）仅适用于我的第二页（“关于”）。

这是我的 nuxt.config.js 文件：

export default defineNuxtConfig({
  ssr: false,
  runtimeConfig: {
    vite: {
      css: {
        preprocessorOptions: {
          scss: {
            additionalData: '@use "@/assets/_colors.scss" as *;'
          }
        }
      }
    },
    css: [
      '@fortawesome/fontawesome-svg-core/styles.css'
    ]
  },
  app: {
    head: {
      htmlAttrs: {
        lang: 'en'
      },
      charset: 'utf-8',
      link: [
        { rel: 'stylesheet', href: 'https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;500&display=swap', crossorigin: 'anonymous' }
      ]
    },
    pageTransition: {
      name: "fade",
      type: "transition"
    }
  }
})

过渡的 css 在我的 app.vue 文件中：

<template>
  <NuxtLayout>
    <NuxtPage />
  </NuxtLayout>
</template>

<style lang="scss">
  .fade-enter-active,
  .fade-leave-active {
    transition: opacity 0.5s;
  }

  .fade-enter,
  .fade-leave-active {
    opacity: 0;
  }
</style>

最后，在我的每个vue页面中，我都添加了以下脚本：

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

转换仅适用于我首先导航到“关于”页面后立即导航到的页面。我还尝试根据 Nuxt3 文档添加

mode: 'out-in'

，这导致我的页面不显示任何内容。请帮助我并指出正确的方向来解决这个问题。

Answer 1

nuxt 3 页面转换中的一个解决方案以不同的方式工作。

1 步它从 nuxt.config.js 中的 app 对象中删除 pageTransition 配置并放入 tou app.vue，类似于：

<template>
  <NuxtLayout>
    <NuxtTransition>
      <NuxtPage />
    </NuxtTransition>
  </NuxtLayout>
</template>

<style lang="scss">
  your css
</style>

Answer 2

在尝试解决另一个问题时，我终于找到了一个奇怪的解决方案。显然，当我添加以下代码时，

definePageMeta({
  layout: 'default'
});

在我的每个页面上，

transition

动画开始为所有页面工作。