需求听起来很小:首页尾部的"LET'S WORK TOGETHER"没什么用,换成博客预告。动手、提交、完工——五分钟后新的反馈来了:键盘的收尾动画没了。
一个区块的隐形依赖清单
复盘下来,删掉一个 SectionWrapper 牵出的线头有三条:
线头一:死链。 顶栏和 Hero 里各有一个指向 #contact 的链接,区块没了,链接还在——点了没反应,还不报错。
线头二:孤儿锚点。 键盘的滚动编舞分三幕,第三幕(键帽漂浮收尾)挂在 #contact 上。内容删了,GSAP 的 ScrollTrigger 找不到锚点,最后一幕静默缺席。和上一篇文章说的 WebGL 静默失败一个脾气:不报错,只是少了一幕戏。
线头三:反悔的成本。 博客预告上了线,看着看着又觉得联系区还是该要。如果第一刀切得干净,git revert 就是;可惜线头一和线头二的存在让"删"变成了七零八落的多点修改,回滚时得把每一个点都找回来。
锚点比内容活得久
最终形态很有意思:联系区的内容换成了"最近在写"的博客预告,但区块的 id 依然是 #contact——编舞锚点原地不动,内容在它上面换了好几轮。
这不是将错就错,是想通了一件事:动画锚点属于"节奏",不属于"内容"。键盘三幕戏需要的是一个稳定的第三幕舞台,至于舞台上站的是联系表单还是博客列表,观众不在乎。后来它还获得了一个 min-h-screen——舞台太小,第三幕的键帽没地方漂。
操作纪律
从这次往返里固化下来两条:
- 删区块前先 grep:
id、href="#..."、motion.ts里的锚点表,命中任何一处都先记下来。 - 改动像样的区块用独立提交:内容、链接、动画锚点分开提交,revert 时才能精确到"哪一层"。