View Transitions API 仅支持同一文档内 DOM 更新的动画，无法用于原生跨 HTML 页面导航；跨页跳转时文档完全卸载，无快照可捕获，故动画失效；所谓 MPA 中使用实为 pushState 模拟 SPA 或服务端配合的伪方案。
View Transitions API 无法实现真正意义上的“多页面间”跨帧动画转换。
它只作用于同一文档内的 DOM 更新
浏览器在跨页面导航（比如点击 a 标签跳转到新 HTML 文件）时，会完全卸载当前 document，再加载并解析新 document。旧 DOM 彻底消失，新 DOM 全新创建——View Transitions 没有旧快照可捕获，也没有新快照可对比，自然无法触发过渡动画。
所谓“MPA 中也能用 View Transitions”的说法，实际是指：
- 用 history.pushState() + 手动替换 DOM（模拟 SPA），再调用 document.startViewTransition()
- 或通过服务端配合，在首屏渲染后立即执行客户端 DOM 切换，并包裹过渡
- 但这些都不是原生跨 HTML 文档的导航，而是绕过完整页面刷新的“伪多页”方案
直接跨页跳转时的典型失效表现
如果你在 location.href = '/new-page.html' 或 前调用 startViewTransition()，会出现以下情况：
- 控制台无报错，但动画完全不出现
- 页面仍为硬切换，仅可能看到一闪而过的旧页面残影
- 因为 transition 回调执行完后，导航才真正触发，DOM 已被销毁
想在 MPA 场景下接近“丝滑”，只能组合其他能力
目前唯一可行的原生路径是：
- 监听 navigation 事件（需注册 Navigation API）
- 在导航开始前，用 document.visibilityState === 'hidden' 判断即将离开
- 手动保存关键元素快照（如 getBoundingClientRect() + getComputedStyle()）
- 在新页面 DOMContentLoaded 后，基于快照做 CSS 过渡（例如 position: fixed + transform）
- 该方案不依赖 View Transitions，但能实现视觉连贯性
CSS 自定义动画必须绑定到正确伪元素
即使在 SPA 中启用 View Transitions，动画样式也需写对：
- ::view-transition-old(root) 控制旧内容退出效果
- ::view-transition-new(root) 控制新内容入场效果
- 若想对特定元素（如标题、图片）单独动画，需给其添加 view-transition-name 属性，并用 ::view-transition-old(my-title) 等匹配
- 动画时长、缓动必须用 animation，不能只靠 transition
不复杂但容易忽略：它不是“跨页面动画 API”，而是“同一页面 DOM 状态切换的快照动画 API”。
