Nuxt3配置页面跳转过渡效果

官网链接

按照官网说明我们只需要在nuxt.config.ts里面配置

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

如果使用的是默认的布局则只需要在app.vue里面配置

<template>
  <NuxtPage />
</template>

<style>
.page-enter-active,
.page-leave-active {
  transition: all 0.4s;
}
.page-enter-from,
.page-leave-to {
  opacity: 0;
  filter: blur(1rem);
}
</style>

然后即可

实测之后–失败

::: danger 需要注意
页面之间跳转并不会有过渡效果，查了半天资料，也没查出个所以然，然后看到一个站点Nuxt3页面过渡动画
:::

起初以为是最新版本问题所以将Nuxt降级到了3.0.0版本,但是测试后还是无效,

解决办法

Nuxt的路由跳转过渡直接输入链接、刷新跳转无效，需要两个页面之间是使用NuxtLink跳转或者是router.push类进行跳转