Avatar

CaiCai

INITIALIZING SYSTEM

封面

XinghuisamaBlogs 导航切换性能优化— 修复总结

2026-06-29 13:34:20
# bug修复
✨ 心情:激动
👁 次阅读

组件背景磨砂→半透明→磨砂闪变

现象

点击导航栏切换页面时,页面内容区组件背景经历三个阶段:
磨砂玻璃 → 半透明 → 回到磨砂,用户感知为"闪了一下"。

根因

每个页面有两层 framer-motion 动画叠加,都从 opacity: 0 开始淡入:

外层 PageTransition    initial={{ opacity: 0 }}   0.8s 淡入
内层 页面组件           initial={{ opacity: 0 }}   0.4s 淡入
     ↓
磨砂卡片 bg-white/40 × opacity < 1 × opacity < 1
     ↓
= 完全透明 → 半透明过渡(几秒)→ 最终磨砂

磨砂卡片的 bg-white/40 backdrop-blur-md 在 opacity 不到 1 时,透光量变大,视觉上就是半透明。

修复

只改一个值:initial 里的 opacity: 0 全部改成 opacity: 1。保留 Y 轴上滑动画,去掉透明度过渡。

// 改前
initial={{ opacity: 0, y: 20 }}   // 从透明开始 → 磨砂闪变

// 改后
initial={{ opacity: 1, y: 20 }}   // 从磨砂开始 → 始终稳定

涉及文件

文件页面改动components/PageTransition.tsx全站包装initial opacity 0→1app/projects/ProjectsBoard.tsx项目项目卡片 initial opacity 0→1app/chatter/ChatterBoard.tsx杂谈杂谈卡片 initial opacity 0→1app/moments/MomentList.tsx说说标题 + 内容容器 opacity 0→1app/photowall/PhotoWallClient.tsx照片墙两个视图 opacity 0→1components/TimelineClient.tsx创作两个视图 opacity 0→1components/AboutClient.tsx关于Tab 内容 opacity 0→1