Astro 切页卡顿与动画重置的排查记录

这个问题最直观的表现是：点击左侧导航以后，导航栏和星星像重新加载了一遍，画面短暂跳动，连续切页时尤其明显。

根因不是链接本身

链接跳转只负责改变地址。真正的问题是页面交换时，固定区域也跟着正文一起被重新创建。节点重新创建后，CSS Animation 会重新建立时间轴，所以星星又从第 0 帧开始闪烁。

同时，如果每次进入页面都重新绑定事件监听器，还会出现监听器累积，时间越久越容易产生重复响应。

把页面拆成两类区域

当前布局把内容分成：

1. 左侧世界导航：跨页面保留
2. 右侧星星与云朵背景：跨页面保留
3. 右侧正文：根据路由更新

Astro 的 transition:persist 用于保留前两类节点，正文则继续正常交换。这样页面地址和内容都能改变，但固定画面不会被整体销毁。

动画为什么还需要统一时钟

只保留节点还不够。节点在交换过程中短暂脱离文档时，部分浏览器仍可能重新建立动画。项目因此记录一个跨路由时间起点，并在交换后根据已经过去的时间设置负 animation-delay。

负延迟的意思不是倒放，而是让动画直接回到“现在本来应该播放到的位置”。例如 4.2 秒循环已经过去 1.6 秒，切页后就从 1.6 秒的位置继续，而不是重新从 0 秒开始。

验证方式

验收时连续执行 BLOG → 项目 → BLOG，检查持久背景层、星星数量和样式节点是否保持单份，同时确认动画延迟持续推进。生产构建也必须通过，避免只在开发服务器中看起来正常。