4.8-《手把手教您使用Nuxt3框架(Nuxt3中文开发教程)》过渡动画

《手把手教您使用Nuxt3框架(Nuxt3中文开发教程)》全文电子档将分章节陆续在“nuxt”微信订阅号原创发布，敬请关注。如果您等不及，急切提前阅读和实操，可以在订阅号中有偿获取完整电子教程和后续持续更新版本。

本教程配套示例源码下载和在线预览网址：https://www.dvtop.cn

Nuxt利用Vue的<Transition>组件在页面和布局中应用过渡动画转换。

4.9.1 页面过渡

页面过渡动画需要在nuxt.config.ts中配置pageTransition开启，同时需要在app.vue中配置过渡动画样式即可（两处配置的名称要一致，示例中名称为page）。

如果页面需要使用自定义的页面过渡动画，先在app.vue中配置新的过渡动画样式。在页面中通过definePageMeta函数设置pageTransition对象的属性name为新的过渡样式名称即可（示例中名称为rotate）。

~/nuxt.config.ts

export default defineNuxtConfig({   app: {     //pageTransition: false, //全局关闭页面过渡动画     pageTransition: { name: 'page', mode: 'out-in' }   } })

~/app.vue

<template>   <NuxtLayout>     <div class="app-box">       <NuxtPage />     </div>   </NuxtLayout> </template> <style>   /* 过渡动画：样式名为page，需与~/nuxt.config.ts中过渡名称一致 */   .page-enter-active,.page-leave-active {     transition: all 0.4s;   }   .page-enter-from,.page-leave-to {     opacity: 0;     filter: blur(1rem);   }   /* 过渡动画：样式名为rotate，需与页面的definePageMeta中过渡名称一致 */   .rotate-enter-active,.rotate-leave-active {     transition: all 0.4s;   }   .rotate-enter-from,.rotate-leave-to {     opacity: 0;     transform: rotate3d(1, 1, 1, 15deg);   } </style>

~/pages/transition/page.vue

<template>   <div>     <BaseFooLink></BaseFooLink>     <h6>页面过渡之页面自定义过渡名称的示例。</h6>     <div>       页面过渡动画需要在页面间切换才会有效果，       如果使用网址直接访问是没有过渡效果。     </div>   </div> </template> <script setup> definePageMeta({   //pageTransition: false, //关闭页面过渡动画   pageTransition: {     name: 'rotate'   } }) </script>

~/pages/index.vue

<template> <div> <p>欢迎访问首页，开启Nuxt3之旅！</p> <div v-for="(page,index) in pageLinks" :key="index"> <NuxtLink :to="page.url">{{page.text}}</NuxtLink> </div> </div> </template> <script setup> const pageLinks = [{ url: "/transition/page", text: "4.9.1 页面过渡动画" }]; </script>

以上通过网址http://localhost:3000浏览网页，再点击“4.9.1 页面过渡动画”链接查看效果。

注意：页面过渡动画需要在页面间切换才会有效果，如果使用网址直接访问是没有过渡效果。

4.9.2 布局过渡

此部分将在“nuxt”微信订阅号原创发布，csdn同步更新，敬请关注。如果您等不及，急切提前阅读和实操，可以在订阅号中有偿获取完整电子教程和后续持续更新版本。
 

4.9.3 更多过渡

全局过渡配置、禁用过渡配置、生命周期事件捕获、动态过渡配置（根据当前参数决定接下来过渡动画效果）、NuxtPage标签中配置过渡动画等高级应用效果日常涉及不多，如需使用请访问附9网址参考官方文档：