教程·网页7 分钟阅读·Updated 2026 年 10 月·ExodeUI 团队
View Transitions API：浏览器中的平滑页面和状态更改
视图转换 API 的用途、同一文档和跨文档转换如何工作、如何使用 CSS 设计它们的样式以及如何负责任地使用它们。
直接总结和定义
核心要点
View Transitions API 允许浏览器在页面的两种状态之间进行动画处理。使用更新 DOM 的函数调用 document.startViewTransition()，浏览器会快照新旧视图并在它们之间进行动画处理，您可以使用 ::view-transition 伪元素对其进行样式设置。它适用于单页应用程序，并支持浏览器跨页面导航。
它是如何运作的
MDN 将 document.startViewTransition() 描述为启动同文档视图转换，这在单页应用程序中很常见。浏览器捕获当前视图，运行更新，捕获新视图，并在它们之间进行动画处理。默认情况下，这是交叉淡入淡出； CSS 让您更改它。
同一文档和跨文档
同一文档转换在一个页面内运行，就像在 SPA 中一样，Chrome 自 Chrome 111 起就支持它们。跨文档转换在多页面站点中的不同页面之间进行动画处理，MDN 指出这在历史上是不可能的；他们使用 pageswap 和 pagereveal 事件以及 CSS 中的选择加入。两者之间的浏览器支持有所不同，因此请检查当前的兼容性表。
设置过渡样式
大多数定制都是简单的 CSS：
- 为元素指定一个视图转换名称，以将其与页面的其余部分分开进行动画处理，例如缩略图变成英雄图像。
- 定位 ::view-transition-old() 和 ::view-transition-new() 来自定义动画。
- 保持持续时间较短且动作有意义。
- 将自定义动画包装在首选减少运动检查中。
渐进增强
在调用 API 之前始终检查支持情况，如果缺少，请直接更新 DOM。页面应该在没有动画的情况下同样工作。避免导航上的长过渡，这会让整个网站感觉更慢。
生产实施片段
交互组件实现
// Same-document transition with a safe fallback
function navigate(updateDom) {
const reduce = matchMedia('(prefers-reduced-motion: reduce)').matches;
if (!document.startViewTransition || reduce) {
updateDom();
return;
}
document.startViewTransition(() => updateDom());
}
/* CSS: animate one element on its own */
.product-image { view-transition-name: product-image; }
::view-transition-old(root),
::view-transition-new(root) {
animation-duration: 200ms;
}要记住的关键 Principle
- startViewTransition() 快照旧视图和新视图并在它们之间进行动画处理
- 存在相同文档 (SPA) 和跨文档（多页）变体
- 带有 view-transition-name 和 ::view-transition 伪元素的样式
- 检查支持并回退到即时更新
- 保持过渡简短并尊重减少的动作
常见问题解答
来源
- View Transition API — MDN 网络文档
- Smooth transitions with the View Transition API — 面向开发者的Chrome