EchoBlog
返回文章

前端开发

用 GSAP 打造丝滑的页面过渡动画

记录一次在 Nuxt 中实现页面切换动画的实践与思考。

NuxtGSAP动画
用 GSAP 打造丝滑的页面过渡动画

页面过渡不是为了炫技,而是为了让用户理解“我从哪里来,又到了哪里去”。在个人博客里,动效可以更轻一点:进入时有层次,离开时不打扰阅读,滚动时给一点反馈。

基本思路

我会把动效拆成三类:首屏进入、列表 stagger、滚动进度。首屏进入负责建立情绪,列表 stagger 让信息更容易扫描,滚动进度则给长页面一个方向感。

在 Nuxt 中落地

Nuxt 的页面结构天然适合做局部动效。页面只需要给关键模块加上稳定的选择器,然后在客户端用 GSAP 处理进入节奏。这样不会污染内容层,也不会把样式写成难以维护的状态机。

控制克制

好的动效应该能被感觉到,但不应该抢走内容注意力。我的默认规则是:位移短、时间短、缓动柔和,并尊重系统的减少动态效果设置。

© 2026 Echo. 保留所有权利。

用热爱发电

Made with Vue & Nuxt