借助 View Transition API，您可以在网站上的不同视图之间创建无缝的视觉转场。无论网站是多页应用 (MPA) 还是单页应用 (SPA)，这都能为用户浏览网站时打造更具视觉吸引力的用户体验。
您会在典型情况下使用视图过渡，包括：
- 缩略图图片，在商品详情页面上转换为完整尺寸的商品图片。
- 一个固定的导航栏，当您从一个页面导航到另一个页面时，导航栏始终保持不变。
- 一个网格，其中的项在您过滤时位置会移动。
实现视图转换
视图转换与特定的应用架构或框架无关，并且不仅可以在单个文档上触发，还可以在两个不同文档之间触发。
这两种类型的视图过渡依赖于完全相同的构建块和原则：
- 浏览器会截取旧状态和新状态的快照。
- DOM 会在渲染被抑制时更新。
- 过渡由 CSS 动画提供支持。
这两种类型的区别在于触发方式。
同文档视图转换
针对单个文档运行视图转换称为“同文档视图转换”。单页应用 (SPA) 中通常就属于这种情况。Chrome 111 及更高版本支持同文档视图过渡。
触发方式
通过调用 document.startViewTransition 触发同文档视图转换：
function handleClick(e) {
// Fallback for browsers that don't support this API:
if (!document.startViewTransition) {
updateTheDOMSomehow();
return;
}
// With a View Transition:
document.startViewTransition(() => updateTheDOMSomehow());
}
示例
以下卡片示例是一个 SPA，它使用同文档视图过渡，在添加新卡片或移除卡片时为卡片添加动画效果。
开始构建
如需了解与同文档视图转换相关的所有信息，请参阅专用文档页面。
跨文档视图转换
两个不同文档之间的视图转换称为“跨文档视图转换”。这对于 MPA 来说是典型的。Chrome 126 及更高版本支持跨文档视图转换。
触发方式
跨文档视图转换由同源跨文档导航触发（如果两个页面都已启用）。换句话说，没有可调用的 API 来启动跨文档视图转换。当用户点击某个链接时，此点击会触发视图过渡。
选择启用，请使用以下 CSS 代码段：
@view-transition {
navigation: auto;
}
示例
以下 Stack Navigator 示例是一个在两个不同文档之间使用跨文档视图转换的 MPA。页面会推送到堆栈或弹出，具体取决于您是否深入导航。
开始构建
全面了解跨文档视图转换。