View Transitions API

定义

View Transitions API 是浏览器提供的原生转场能力：在 DOM 状态变化前后各截取一份快照，由浏览器自动在两者之间生成过渡动画，开发者只需一行 document.startViewTransition(callback) 包裹更新逻辑。

工作原理

API 将新旧快照组织为 ::view-transition-old 与 ::view-transition-new 等伪元素树，默认执行交叉淡入淡出；为元素声明 view-transition-name 后，同名元素会在新旧状态间平滑移动、缩放，形成「共享元素动画」。所有动画均可用 CSS 自定义。

跨文档过渡

规范进一步支持多页应用（MPA）在同源导航时通过 @view-transition 规则启用跨页面转场，使传统多页站点获得接近单页应用的切换体验。

意义与支持

此前实现转场需手动克隆节点、计算 FLIP 动画，成本高昂。该 API 将其收编为平台能力，Chromium 系浏览器与 Safari 已支持同文档过渡，各前端路由器（如 Astro、Next.js 生态）已陆续集成。