Nuxt3配置页面跳转过渡效果

25 年 01 月 19日星期日 (已编辑)

作者：罗罗

日常生活

这篇文章最后修改于 2025年 01月 19日 11时00分部分内容可能已不适用如有疑问请联系作者.

Nuxt3配置页面跳转过渡效果

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

ts 复制代码

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

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

html 复制代码

<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类进行跳转

暂无目录信息

文章标题：Nuxt3配置页面跳转过渡效果

文章作者：罗罗

文章链接：[复制]

最后修改时间：2024年 04月 10日 17时43分

商业转载请联系站长获得授权，非商业转载请注明本文出处及文章链接，您可以自由地在任何媒体以任何形式复制和分发作品，也可以修改和创作，但是分发衍生作品时必须采用相同的许可协议。本文采用CC BY-NC-SA 4.0进行许可。

豫ICP备2022014268号-1

我们历经沧桑，这样错过了一生最好的时光，错过了便是永远