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