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

来源：世旅网

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

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

页面过渡动画需要在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' }

}

})

因篇幅问题不能全部显示，请点此查看更多更全内容

查看全文