入门篇五：Nuxt4页面过渡动画：让页面切换丝滑流畅

文章目录一、启用默认过渡二、滑动切换效果三、缩放效果四、页面级过渡五、布局过渡常见问题Q1过渡动画卡顿怎么办Q2如何调试过渡动画Q3过渡动画影响 SEO 吗总结用户点击链接页面瞬间切换太生硬了有没有加个过渡动画体验感立马提升一个档次。Vue 本身提供了Transition组件但 Nuxt 把它封装得更好用——不用每个页面单独写全局配置一次就搞定。一、启用默认过渡在nuxt.config.ts中开启页面过渡exportdefaultdefineNuxtConfig({app:{pageTransition:{name:page,mode:out-in}}})然后在全局样式中定义过渡效果/* assets/css/main.css *//* 页面离开 */.page-leave-active{transition:opacity 0.3s ease;}.page-leave-to{opacity:0;}/* 页面进入 */.page-enter-active{transition:opacity 0.3s ease;}.page-enter-from{opacity:0;}现在切换页面就能看到淡入淡出效果了二、滑动切换效果/* 页面离开 - 向左滑出 */.page-leave-active{transition:transform 0.3s ease,opacity 0.3s ease;}.page-leave-to{transform:translateX(-100%);opacity:0;}/* 页面进入 - 从右侧滑入 */.page-enter-active{transition:transform 0.3s ease,opacity 0.3s ease;}.page-enter-from{transform:translateX(100%);opacity:0;}效果就像手机 APP 切换页面一样很有质感。三、缩放效果适合卡片式布局的页面切换.page-leave-active{transition:transform 0.3s ease,opacity 0.3s ease;}.page-leave-to{transform:scale(0.9);opacity:0;}.page-enter-active{transition:transform 0.3s ease,opacity 0.3s ease;}.page-enter-from{transform:scale(1.1);opacity:0;}四、页面级过渡不同页面可以用不同的过渡效果script setup langts definePageMeta({ pageTransition: { name: fade, mode: out-in } }) /script或者禁用过渡script setup langts definePageMeta({ pageTransition: false }) /script五、布局过渡布局切换时也可以加动画// nuxt.config.tsexportdefaultdefineNuxtConfig({app:{layoutTransition:{name:layout,mode:out-in}}}).layout-enter-active, .layout-leave-active{transition:opacity 0.3s ease;}.layout-enter-from, .layout-leave-to{opacity:0;}常见问题Q1过渡动画卡顿怎么办使用transform和opacity而非top/left它们不会触发重排。Q2如何调试过渡动画使用 Vue DevTools 的 Transition 面板查看过渡状态。Q3过渡动画影响 SEO 吗不影响过渡是客户端行为。总结过渡动画配置效果CSS 属性淡入淡出opacity滑动transform: translateX缩放transform: scale参考资料入门篇三Nuxt4组件自动导入写代码少敲一半字入门篇二Nuxt 4路由自动生成告别手动配置路由的日子有什么问题评论区聊聊觉得文章有用的话别忘了点赞、收藏、分享三连支持