组件背景磨砂→半透明→磨砂闪变
现象
点击导航栏切换页面时,页面内容区组件背景经历三个阶段:
磨砂玻璃 → 半透明 → 回到磨砂,用户感知为"闪了一下"。
根因
每个页面有两层 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

