Nuxt3 实战 (十一):添加路由 Transition 过渡效果和 Loading 动画

简介: 这篇文章介绍了Nuxt3框架中页面和布局的过渡效果设置方法,以及首屏加载动画的添加。通过配置nuxt.config.ts文件和添加CSS样式,可以实现页面过渡效果。同时,文章也提到了在页面中设置不同的过渡效果和为布局和页面同时设置过渡效果的方法。最后,文章以一个Github仓库链接和一个线上预览地址作为总结,表示遵循官方文档操作即可完成相关设置。

页面过渡效果

Nuxt3 利用 Vue组件 在页面和布局之间应用过渡效果。

  1. nuxt.config.ts 文件配置:
    export default defineNuxtConfig({
         
    app: {
         
     pageTransition: {
          name: 'page', mode: 'out-in' }
    },
    })
    
  2. 在页面之间添加过渡效果,在 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>
    
  3. 要为页面设置不同的过渡效果,请在页面的 definePageMeta 中设置 pageTransition 键:

    <script setup lang="ts">
    definePageMeta({
          
    pageTransition: {
          
     name: 'rotate'
    }
    })
    </script>
    

如果你同时更改布局和页面,这里设置的页面过渡效果将不会运行。相反,你应该设置布局过渡效果

布局过渡效果

  1. nuxt.config.ts 文件配置:
    export default defineNuxtConfig({
         
    app: {
         
     layoutTransition: {
          name: 'layout', mode: 'out-in' }
    },
    })
    
  2. 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>
    

首屏加载动画

Nuxt3 并没有直接提供 API,但我们利用 生命周期钩子 来完成我们期望的效果。

  1. 新建 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>
    
  2. 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>
    

页面进度条

我们还可以添加一个页面进度条,Nuxt3 提供了 组件,我们直接在 app.vue 中添加:

<template>
  <NuxtLayout>
    <!-- 在页面导航之间显示一个进度条 -->
    <NuxtLoadingIndicator />
    <NuxtPage />
  </NuxtLayout>
</template>

效果预览

he1ge9mmznfop0ao19m887vhotzezmeq.gif

总结

通过本篇文章我们学习了如何在 Nuxt3 中添加路由切换过渡效果和首屏加载动画,没什么干货,按照官方文档操作就完事了。

Github 仓库dream-site

线上预览dream-site.cn

相关文章
mix-blend-mode 利用混合模式让文字智能适配背景颜色
这篇文章介绍了CSS3属性mix-blend-mode的使用方法,该属性能够实现文字智能适配背景颜色的效果,其中包括文字镂空效果。文章详细解释了该属性的混合模式计算方式以及各种属性值的效果。
289 0
mix-blend-mode 利用混合模式让文字智能适配背景颜色
|
前端开发 应用服务中间件 网络安全
【Nuxt】Nuxt做官网要求适配PC&Mobile,我的解决方案
前言 项目终于进入了尾声,这段时间主要在忙公司官网的开发,前段时间我在忙另外一个项目的时候,官网这个项目就启动了,团队里的另外一个小伙伴居然用Vue-cli构建了一个项目去做官网,导致我很难李姐,所以我提出重构项目,由我主导开发,写篇文章记录一下项目信息以及部分关键点。
2171 0
|
前端开发
【Sa-Token】7、Sa-Token抛出的异常统一处理
在 Sa-Token 的登录,授权,验证过程中,会抛出很多的异常,我们不能将这些异常信息直接返回给用户,因为用户是看不懂这些异常信息的,我们就需要对这些异常信息进行处理,处理之后再返回展示给前端用户
1836 0
|
存储 应用服务中间件 nginx
nuxt3:我们开始吧-开发-配置-部署(三)
nuxt3:我们开始吧-开发-配置-部署(三)
1782 0
|
存储 JavaScript 中间件
Nuxt3 实战 (一):初始化项目
这篇文章介绍了Nuxt框架的基本信息,包括什么是Nuxt以及Nuxt3的优点。文章还介绍了Nuxt3的一些特点,如服务端渲染和静态站点生成、模块化、文件系统路由等。此外,文章还提供了项目安装的步骤和目录结构。最后,文章提到了下一步计划,即配置 Eslint、Prettier、Husky、lint-staged、commitlit项目提交规范的过程。
372 3
Nuxt3 实战 (一):初始化项目
|
JavaScript
Nuxt3 实战 (四):安装 Nuxt UI 和配置 Typescript 类型检查
这篇文章介绍了在项目中安装和配置Nuxt UI以及TypeScript的步骤。作者在前言中提到考虑了AntDesignVue和Element-Plus,但最终选择了NuxtUI,因为它更适合年轻化的项目,并且与Nuxt兼容。安装Nuxt UI需要执行一系列命令,同时会自动安装一些相关模块。然后,可以在Nuxt应用中使用Nuxt UI的所有组件和可组合函数。此外,还介绍了如何添加图标库和配置TypeScript。
463 0
Nuxt3 实战 (四):安装 Nuxt UI 和配置 Typescript 类型检查
Nuxt3 实战 (八):优雅的实现暗黑主题模式
这篇文章介绍了在Nuxt3中实现暗黑模式的过程。首先推荐使用color-mode库来轻易实现暗黑模式切换,并通过pnpm命令安装@nuxtjs/color-mode依赖。然后在nuxt.config.ts配置文件中注入依赖,并根据项目实际情况自定义配置。接着通过toggleDark函数实现切换动画,并在需要的地方加载组件<ColorMode/>,从而达到最终效果。
342 0
Nuxt3 实战 (八):优雅的实现暗黑主题模式
Nuxt3 实战 (五):Header 头部布局
这篇文章介绍了作者忙于公司系统迭代需求,但抽空完成了布局的Header部分。文章提到了需求的拆分,布局的组件拆分,并介绍了Nuxt框架以及安装和启用插件的步骤。还提到了白天暗黑模式切换组件和SVG跟随模式的组件的创建。最后,文章提到了PC端和移动端的最终实现效果,并给出了Github仓库和在线预览链接。
311 0
Nuxt3 实战 (五):Header 头部布局
|
数据采集 搜索推荐 开发者
Nuxt3 实战 (十二):SEO 搜索引擎优化指南
这篇文章介绍了如何为Nuxt.js项目添加favicon图标和TDK(标题、描述、关键词),安装@nuxtjs/seo模块,以及如何设置Robots、Sitemap、OG Image、Schema.org、Experiments等。文章还提到了添加Google Analytics、Microsoft Clarity和Umami统计代码的方法。文章最后总结称,Nuxt.js 3集成了很多SEOModules,使开发者能够更加高效便捷地做好搜索引擎方面的优化。
677 0
Nuxt3 实战 (十二):SEO 搜索引擎优化指南
|
12月前
|
XML 缓存 前端开发
Electron-builder 是如何打包 Windows 应用的?
本文首发于微信公众号“前端徐徐”,作者徐徐深入解析了 electron-builder 在 Windows 平台上的打包流程。文章详细介绍了 `winPackager.ts`、`AppxTarget.ts`、`MsiTarget.ts` 和 `NsisTarget.ts` 等核心文件,涵盖了目标创建、图标处理、代码签名、资源编辑、应用签名、性能优化等内容,并分别讲解了 AppX/MSIX、MSI 和 NSIS 安装程序的生成过程。通过这些内容,读者可以更好地理解和使用 electron-builder 进行 Windows 应用的打包和发布。
678 0