借助 View Transition API，您可以在网站上的不同视图之间打造无缝的视觉过渡。无论是构建为多页应用 (MPA) 还是单页应用 (SPA)，此功能都会在用户浏览您的网站时打造更具视觉吸引力的用户体验。
使用视图转换的典型情况包括：
- 商品详情页面上的缩略图，可转换为商品详情页面上的完整尺寸的商品图片。
- 固定的导航栏，在您从一个网页导航到另一个网页时，该导航栏会保持原位。
- 一个网格，其中的项会在您过滤时移动位置。
实现视图转换
视图转换不与特定的应用架构或框架相关联，并且不仅可以在单个文档上触发，还可以在两个不同文档之间触发。
两种类型的视图转换都依赖于相同的基础组件和原则：
- 浏览器会截取新旧状态的快照。
- DOM 会在渲染被禁用时进行更新。
- 过渡效果由 CSS 动画提供支持。
这两种类型的区别在于触发方式。
同一份文档的视图转换
当针对单个文档运行视图转换时，这种转换称为同一文档视图转换。单页应用 (SPA) 通常就属于这种情况。Chrome 111 及之后的版本支持在 Chrome 中使用同一文档的视图转换。
触发方式
通过调用 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;
}
示例
下面的堆栈导航器示例是一个在两个不同文档之间使用跨文档视图过渡的 MPA。根据您是否深入导航，页面会被推送到堆栈或弹出。
开始构建
了解关于跨文档视图转换的所有须知事项。