此页面由 Cloud Translation API 翻译。

使用 View Transition API 实现平滑过渡

Bramus

借助 View Transition API，您可以在网站上的不同视图之间创建无缝的视觉转场。无论网站是多页应用 (MPA) 还是单页应用 (SPA)，这都能为用户浏览网站时打造更具视觉吸引力的用户体验。

使用视图过渡的典型情况包括：

缩略图图片，在商品详情页面上转换为完整尺寸的商品图片。
一个固定的导航栏，当您从一个页面导航到另一个页面时，导航栏始终保持不变。
一个网格，其中的项在您过滤时位置会移动。

</ph>

使用 View Transition API 创建的转场效果。试用演示网站。需要 Chrome 111 或更高版本。

实现视图转换

视图转换与特定的应用架构或框架无关，并且不仅可以在单个文档上触发，还可以在两个不同文档之间触发。

这两种类型的视图过渡依赖于完全相同的构建块和原则：

浏览器会截取旧状态和新状态的快照。
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>

卡片演示的录制。需要 Chrome 111 或更高版本。

开始构建

如需了解与同文档视图转换相关的所有信息，请参阅专用文档页面。

构建同文档视图过渡

跨文档视图转换

两个不同文档之间的视图转换称为“跨文档视图转换”。这对于 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>

Stack Navigator 演示的录制。需要 Chrome 126 或更高版本。

开始构建

全面了解跨文档视图转换。

构建跨文档视图转换