如果需要炫酷的页面过渡效果可以进行配置和定制
nuxt.config.ts
进行配置,对应class名称前缀,和显示方式
export default defineNuxtConfig({
app: {
pageTransition: { name: 'app', mode: 'out-in' } // app是对应的class名称前缀,可以字定义
},
})
这时可以在全局页面中 定义对应的class样式,切换路由就可以看到页面效果
<style>
.app-enter-active,
.app-leave-active {
transition: all 0.4s;
}
.app-enter-from,
.app-leave-to {
opacity: 0;
/* filter: blur(1rem); */
transform: translateX(50px);
}
</style>
同理 如果做布局过渡,切换布局效果 配置
nuxt.config.ts
export default defineNuxtConfig({
app: {
layoutTransition: { name: 'layout', mode: 'out-in' }
},
})
全局样式效果
<style>
.layout-enter-active,
.layout-leave-active {
transition: all 0.4s;
}
.layout-enter-from,
.layout-leave-to {
filter: grayscale(1);
}
</style>
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。