JavaScript View Transitions 如何避免并发导航动画冲突：skipTransition、finished 与回滚状态

列表页切换得越快，View Transitions 越容易暴露一个问题：第一段动画还没有结束，第二次导航已经开始了。只把页面内容塞进 startViewTransition() 不够，旧 transition 的生命周期也要被收口。本文用同一份浏览器示例中的“并发测试”入口验证 skipTransition()、finished 和失败回滚如何配合。

并发导航的关键不是阻止第二次点击，而是让新导航先跳过旧动画，再等待自己的 finished，最后只由当前 transition 清理活动状态。

先把并发问题压缩成一个可观察示例

示例有三个路由按钮和一个“并发测试”入口：/inbox、/reports、/settings，以及同一点击事件里连续调用两次 navigate()。左侧导航入口会显示页面的当前路由，右侧事件链会记录每次导航的序号、前后路由、skipTransition() 与 finished。这样截图里看到的是实际运行结果，不是抽象流程图。

旧动画为什么必须先 skipTransition

navigate() 每次调用先递增 state.sequence，再检查 state.active。发现旧动画时调用 skipTransition()，浏览器会跳过旧动画的视觉过程，但不会替新导航完成提交，因此新调用仍需执行自己的 startViewTransition(commit)。

const sequence = ++state.sequence;
if (state.active) {
  state.active.skipTransition();
  log(`导航#${sequence}：发现旧动画，调用 skipTransition()`);
}
const transition = document.startViewTransition(commit);
state.active = transition;

这里的顺序很重要：先把新 transition 放进 state.active，旧 transition 的清理逻辑才不能误删它。

finished 之后再做状态清理

finished 是一个 Promise。等待它完成后再记录“状态已收口”，并在 finally 中用 state.active === transition 做身份检查。这个判断防止旧 transition 晚到的回调把新 transition 的引用改成空值。

动画失败时保留可恢复状态

失败分支把 state.route 和地址文本恢复到 previous，而不是只把按钮样式改回去。用户看到的内容、路由状态和日志必须指向同一个结果，否则下一次点击会从错误的基线继续。

兼容降级和常见坑

不要把 skipTransition() 当成取消业务请求的 API；它只处理 View Transition 的动画生命周期。真正的异步数据请求仍应有自己的请求序号或 AbortController。

相关问题

View Transitions 不支持时页面会白屏吗？

不会，示例在能力不存在时直接调用 commit()，只是没有过渡动画。

为什么不能无条件把 active 设为 null？

旧 transition 的 finally 可能晚于新 transition；应先比较对象身份。

skipTransition 会撤销已经提交的路由吗？

不会，它跳过视觉动画；路由提交仍由当前调用的 commit() 负责。

小结

并发导航的验收标准很具体：旧 transition 能被跳过，新 transition 能收到 finished，异常能回滚，降级路径能直接更新内容。把这四个信号写进事件日志，比只盯着动画是否顺滑更容易定位竞态。