页面过渡效果
Nuxt3 利用 Vue 的 组件 在页面和布局之间应用过渡效果。
nuxt.config.ts 文件配置:
js 代码:在页面之间添加过渡效果,在 app.vue 文件中添加以下 CSS:
html 代码:要为页面设置不同的过渡效果,请在页面的 definePageMeta 中设置 pageTransition 键:
html 代码:
如果你同时更改布局和页面,这里设置的页面过渡效果将不会运行。相反,你应该设置
布局过渡效果。
布局过渡效果
nuxt.config.ts 文件配置:
js 代码:在 app.vue 文件中添加代码:
html 代码:
首屏加载动画
Nuxt3 并没有直接提供 API,但我们利用 生命周期钩子 来完成我们期望的效果。
新建 components/FullLoading/index.vue 文件:
html 代码: <template>
<div
class="fixed flex w-screen h-screen justify-center items-center flex-col z-[99] overflow-hidden bg-white dark:bg-slate-900"
>
<div
class="relative w-12 h-12 rotate-[165deg] before:content-[''] after:content-[''] before:absolute after:absolute before:top-2/4 after:top-2/4 before:left-2/4 after:left-2/4 before:block after:block before:w-[.5em] after:w-[.5em] before:h-[.5em] after:h-[.5em] before:rounded after:rounded before:-translate-x-1/2 after:-translate-x-1/2 before:-translate-y-2/4 after:-translate-y-2/4 before:animate-[loaderBefore_2s_infinite] after:animate-[loaderAfter_2s_infinite]"
/>
</div>
</template>
<style>
@keyframes loaderBefore {
0% {
width: 0.5em;
box-shadow:
1em -0.5em rgba(225, 20, 98, 0.75),
-1em 0.5em rgba(111, 202, 220, 0.75);
}
35% {
width: 2.5em;
box-shadow:
0 -0.5em rgba(225, 20, 98, 0.75),
0 0.5em rgba(111, 202, 220, 0.75);
}
70% {
width: 0.5em;
box-shadow:
-1em -0.5em rgba(225, 20, 98, 0.75),
1em 0.5em rgba(111, 202, 220, 0.75);
}
100% {
box-shadow:
1em -0.5em rgba(225, 20, 98, 0.75),
-1em 0.5em rgba(111, 202, 220, 0.75);
}
}
@keyframes loaderAfter {
0% {
height: 0.5em;
box-shadow:
0.5em 1em rgba(61, 184, 143, 0.75),
-0.5em -1em rgba(233, 169, 32, 0.75);
}
35% {
height: 2.5em;
box-shadow:
0.5em 0 rgba(61, 184, 143, 0.75),
-0.5em 0 rgba(233, 169, 32, 0.75);
}
70% {
height: 0.5em;
box-shadow:
0.5em -1em rgba(61, 184, 143, 0.75),
-0.5em 1em rgba(233, 169, 32, 0.75);
}
100% {
box-shadow:
0.5em 1em rgba(61, 184, 143, 0.75),
-0.5em -1em rgba(233, 169, 32, 0.75);
}
}
</style>
app.vue 添加代码:
html 代码:
页面进度条
我们还可以添加一个页面进度条,Nuxt3 提供了 组件,我们直接在 app.vue 中添加:
html 代码:效果预览

总结
通过本篇文章我们学习了如何在 Nuxt3 中添加路由切换过渡效果和首屏加载动画,没什么干货,按照官方文档操作就完事了。
Github 仓库:dream-site
线上预览:dream-site.cn
路由过渡动画有一个天坑存在。
onMounted会被执行2次,而且这个问题存在已久...
https://github.com/nuxt/nuxt/issues/27442
暂无点赞