最近收到好几条「违和感」反馈：页面跳转时点击特效卡在半空、新页面会重播一遍入场动画、扩散的起点暴露了内部的突兀刷新、右上角控制面板随滚动一闪一闪，以及首页头图最下方的波浪又糊又在深色模式里直接缺席。前后两批上线、三轮验收返工，过程里踩到的几个坑都值得一记。

1 点击特效「卡住」：凶手是 View Transition

站点页面切换用的是浏览器原生 View Transition：从点击处扩出一个圆弧，把新页面揭示出来，底下由 pjax 完成 DOM 替换。点击爆发特效（canvas 逐帧动画）则挂在页脚。

用 headless Chrome 逐帧采样后真相很简单：VT 动画整个由合成器驱动，切换全程主线程的 requestAnimationFrame 被冻结了约 750ms——球动画不是卡，是被按停了。修法不是救活动画（页面都在切换，特效本来也不该炸），而是在按下瞬间把特效画布藏起来、落地一秒左右再归还。第一版把冻结挂在 click 上被打了回来：特效本来就在 mousedown 抛球，按下到松手之间它照样炸了个满屏。「点击的那一瞬间就不出现」才是及格线。

2 扩散起点跟着手指走

旧版圆弧从卡片矩形扩出，会暴露内部刷新；新版对齐右下角模式切换按钮的效果：把指针坐标写进两个 CSS 自定义属性，关键帧只管引用——

@keyframes gpluo-tx-vt-open {
  from { clip-path: circle(0px at var(--gpluo-tx-vt-x, 50%) var(--gpluo-tx-vt-y, 50%)); }
  to   { clip-path: circle(150vmax at var(--gpluo-tx-vt-x, 50%) var(--gpluo-tx-vt-y, 50%)); }
}

坐标随跳转种子一起存进 sessionStorage，新文档加载后照常可用；拿不到真指针时回退按压框中心。

3 新页面的「二次入场」与常驻控制面板

主题的入场动画由 IntersectionObserver 驱动，新页落地后会再播一遍「模糊变清晰」。根治法是切换开始前就给 <html> 挂一个「安静」类，把入场动画名压成 none，并让它在整个新文档生命周期里常留——只压到切换结束是不够的，摘掉类的瞬间动画还会被重新触发。

控制面板则是另一个故事：主题 JS 每个滚动帧都给按钮写行内 transform: scale(0/1)。回到顶部保留原逻辑，面板用一条带 !important 的规则永久压住行内值。

4 波浪：从模糊 PNG 到单周期 SVG 瓦片

原波浪素材是 997×85 与 1009×100 的半透明 PNG，在页面上被横着拉伸约四倍，糊得明显。替换思路是画一个单周期的 SVG 瓦片塞进 data-uri，靠 background-size 平铺、background-position 动画滚动。这个思路本身没错，但连踩三个坑才落地：

  • SVG 不写 preserveAspectRatio="none" 时浏览器会按等比缩放再居中，每个瓦片左右各空出一截——波浪「变成一段一段」；
  • data-uri 里裸写负号产生的 %-1 是非法 percent-escape，整个 URI 解码失败，background-image 被整条丢弃——波浪「直接消失」。canvas 探针显示图片 naturalWidth 一切正常、就是画不出一个像素；
  • 站点自带的手写性能优化会把这份 CSS 内联进页面，有 4096 字节硬上限，超了就回退成外链样式、又被主题页内样式压死。

最终版波形用 20 段折线逼近正弦（最大偏差 0.19px，肉眼即是曲线），周期取 1000/1200px 贴近原素材峰距，滚动位移正好是整数倍周期，素材不再被拉伸，锐利且无缝。

5 衔接色差：别猜，去量

波浪「能渲染」离「看着不突兀」还差一段：与下方面板的交界处始终有一条线。把原版 PNG 的 alpha 剖面量出来后答案自己跳了出来——原图底行是全不透明的白（alpha 255），再乘元素自带的 opacity: .85 恰好等于面板白，天然无缝；而均一 .82 的填法让底行暗了 24 级，才显出那条线。填色改成竖向渐变（白 .70 → 1.0）后，线上实测接缝亮度差只剩 0.5 级。

深色模式的问题正好相反：主题原本就把波浪 display:none，复活实心半透明带之后，带的亮度会随壁纸浮动成一条「亮河」。最终深色波浪改成竖向渐隐（alpha .95 → 0），配合卡片底板透明度同步调低，多个取样点的波带-板亮度差全部收敛到 2.3 级以内——过渡靠波峰的弧线，不靠一条带子。

顺手把深色头图那层灰色遮罩从 #8c8c8c 提到 #a8a8a8——「头图太灰」的抱怨说的就是它。

收尾

全部改动放在子主题与站点专用插件里，父主题保持官方原样可随时升级，每一步都有带时间戳的备份。这轮最大的心得只有一句：眼睛提问题，仪表找原因。逐帧探针、canvas 像素计数、亮度剖面——量出来的每一分钟都没有白花。而三轮「还是不对」则是最好的标定器。