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' }   } })