页面过渡效果
Nuxt3 利用 Vue 的 组件 在页面和布局之间应用过渡效果。
nuxt.config.ts文件配置：export default defineNuxtConfig({ app: { pageTransition: { name: 'page', mode: 'out-in' } }, })AI 代码解读在页面之间添加过渡效果，在
app.vue文件中添加以下CSS：<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>AI 代码解读要为页面设置不同的过渡效果，请在页面的
definePageMeta中设置pageTransition键：<script setup lang="ts"> definePageMeta({ pageTransition: { name: 'rotate' } }) </script>AI 代码解读
如果你同时更改布局和页面，这里设置的页面过渡效果将不会运行。相反，你应该设置布局过渡效果。
布局过渡效果
nuxt.config.ts文件配置：export default defineNuxtConfig({ app: { layoutTransition: { name: 'layout', mode: 'out-in' } }, })AI 代码解读在
app.vue文件中添加代码：<template> <NuxtLayout> <NuxtPage /> </NuxtLayout> </template> <style> .layout-enter-active, .layout-leave-active { transition: all 0.4s; } .layout-enter-from, .layout-leave-to { filter: grayscale(1); } </style>AI 代码解读
首屏加载动画
Nuxt3 并没有直接提供 API，但我们利用 生命周期钩子 来完成我们期望的效果。
新建
components/FullLoading/index.vue文件：<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>AI 代码解读app.vue添加代码：<script setup lang="ts"> const nuxtApp = useNuxtApp() // 是否首次加载 const isFullLoading = ref(true) nuxtApp.hook('page:start', () => { isFullLoading.value = true }) nuxtApp.hook('page:finish', () => { isFullLoading.value = false }) </script> <template> <div> <!-- 首页加载全屏动画 --> <FullLoading v-if="isFullLoading" /> <NuxtLayout> <NuxtPage /> </NuxtLayout> </div> </template>AI 代码解读
页面进度条
我们还可以添加一个页面进度条，Nuxt3 提供了 组件，我们直接在 app.vue 中添加：
<template>
<NuxtLayout>
<!-- 在页面导航之间显示一个进度条 -->
<NuxtLoadingIndicator />
<NuxtPage />
</NuxtLayout>
</template>
AI 代码解读
效果预览
总结
通过本篇文章我们学习了如何在 Nuxt3 中添加路由切换过渡效果和首屏加载动画，没什么干货，按照官方文档操作就完事了。
Github 仓库：dream-site
线上预览：dream-site.cn
