View Transition 路由连续性

大理论

传统 SPA/MPA 跳转常让用户突然失去空间上下文：列表卡片消失、详情页出现、筛选结果重排、弹层变成页面。View Transition API 提供了浏览器级截图和动画机制，让 DOM 状态或文档导航之间的视觉变化可被命名和编排。但它不能替代路由语义、焦点管理、滚动恢复和可访问 fallback；它只是把已有状态变化表达得更连续。

小知识点

1. 先确定 continuity object：列表卡片到详情 hero、缩略图到大图、tab content 切换、filter result reflow，而不是给所有元素随机转场。
2. 每个 view-transition-name 必须稳定且唯一；列表动态项要避免重复 name 和卸载竞态。
3. 路由 URL、history、back/forward、scroll restoration 和 detail 返回上下文仍然要正常工作。
4. 焦点不能停留在旧 DOM；转场结束后把 focus 移到新页面标题、详情主区域或保持合理的交互对象。
5. prefers-reduced-motion 下改成短 crossfade 或无转场；不要用大位移、旋转和 zoom 来表示普通导航。
6. 需要检查浏览器支持和 progressive enhancement；缺少 API 时页面应立即完成状态更新。

设计判断

如果转场让用户更清楚“我点的这张卡变成了这个详情”或“筛选后这些结果重新组织了”，它是有用的；如果用户只是等待漂亮动画结束才能继续操作，它就是阻力。

实现建议

为每条路由转场写 transition brief：source element、destination element、state update、URL/history、focus target、scroll behavior、reduced-motion、browser support 和失败 fallback。Next/React 中让转场包裹实际 state/navigation 更新，而不是延迟数据加载；CSS 只命名需要 continuity 的元素，限制 duration 在 150-300ms 左右，复杂页面优先做小范围转场。

反例/风险

全站每次导航都 crossfade 导致方向感下降、重复 view-transition-name 让动画错配、返回列表丢失筛选和滚动、转场期间焦点不可见、reduced-motion 仍 zoom、数据还没到就播放空壳动画。

案例分析

MDN 说明 View Transition API 可在 SPA DOM 状态和 MPA 文档导航之间创建动画转场；web.dev 在 2025 年 10 月记录 same-document view transitions 进入 Baseline Newly available，并指出相关特性成为 Interop 2025 重点。可学习点是：这是一个渐进增强的连续性工具，适合给真实导航状态补充方向感，而不是替代信息架构。

来源链接

MDN View Transition API: https://developer.mozilla.org/en-US/docs/Web/API/View_Transition_API MDN Using the View Transition API: https://developer.mozilla.org/en-US/docs/Web/API/View_Transition_API/Using web.dev Same-document view transitions Baseline: https://web.dev/blog/same-document-view-transitions-are-now-baseline-newly-available Chrome View Transitions: https://developer.chrome.com/docs/web-platform/view-transitions