View Transitions API 是浏览器原生 API，用于在不同视图之间创建平滑动画过渡，可用于 SPA（JavaScript 触发）与 MPA（基于导航）。浏览器支持：同文档（SPA）为 Chrome 111+、Edge 111+、Safari 18+、Firefox 144+；跨文档（MPA）为 Chrome 126+、Edge 126+、Safari 18.2+。
在 SPA 中先检测 document.startViewTransition 是否存在，不支持时直接更新 DOM；支持时把 DOM 更新回调传给 document.startViewTransition 即可。API 流程为：捕获当前状态快照、执行回调更新 DOM、捕获新状态快照、在旧新状态间播放动画。在 MPA 中无需 JavaScript，在两个页面用 CSS 的 @view-transition { navigation: auto; } 启用，同源导航会自动过渡。
可通过 ::view-transition-old(root) 与 ::view-transition-new(root) 自定义默认交叉淡入淡出，并用 view-transition-name 为元素指定独立过渡（名称必须唯一）。运行时生成的伪元素树包含 ::view-transition、::view-transition-group、::view-transition-image-pair、::view-transition-old 与 ::view-transition-new。JavaScript 侧 ViewTransition 对象提供 ready、updateCallbackDone、finished 三个 Promise 及 skipTransition()，并可用 types 为过渡分类以便按类型写样式，也可在 ready 后对伪元素使用 Web Animations API 自定义动画。
常见用法包括英雄图变形、共享头部、滑动过渡、圆形揭示和网格项展开；MPA 可用 match-element（Chrome 126+）或手动匹配名称实现跨页面元素衔接。React 可通过自定义 Hook、React Router 包装，或 React 19+ 的 unstable_ViewTransition（实验性）接入。
可访问性上应用 @media (prefers-reduced-motion: reduce) 关闭动画，屏幕阅读器会直接看到 DOM 更新。调试可在 Chrome DevTools 中勾选显示视图过渡伪元素并放慢动画。最佳实践建议过渡控制在 200–400ms、少用 view-transition-name、避免布局偏移、在无 API 时保证 DOM 更新可用、用 types 区分前进与后退方向，并为元素仅在单页出现等边缘情况编写进入/退出处理；不支持时可回退为直接执行回调。具体命令与代码保持资料原样。