使用 View Transition API 实现平滑过渡

Bramus

借助 View Transition API，您可以在网站上的不同视图之间创建流畅的视觉过渡。这样一来，无论您的网站是作为多页面应用 (MPA) 还是单页应用 (SPA) 构建的，在用户浏览您的网站时，都能为他们带来更具视觉吸引力的用户体验。

您可以使用视图转换的典型情况包括：

  • 商品详情页面上的缩略图，在商品详情页面上会转换为全尺寸商品图片。
  • 固定导航栏会在您从一个页面导航到另一个页面时保持不变。
  • 随着您过滤，网格中的内容会移动位置。
使用 View Transition API 创建的转换。试用演示网站。需要 Chrome 111 或更高版本。

实现视图转换

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

这两种视图转换都依赖于完全相同的构建块和原则：

  1. 浏览器会拍摄旧状态和新状态的快照。
  2. 在抑制渲染时，DOM 会更新。
  3. 过渡由 CSS 动画提供支持。

这两种类型之间的区别在于触发方式。

同一文档视图转换

当视图转换在单个文档上运行时，称为同一文档视图转换。在单页应用 (SPA) 中，通常就是这种情况。从 Chrome 111 开始，Chrome 支持同一文档视图转换。

浏览器支持

  • Chrome：111.
  • Edge：111.
  • Firefox：不受支持。
  • Safari：18.

来源

如何触发

通过调用 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，它会在添加或移除新卡片时使用同一文档视图转换为卡片添加动画效果。

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

开始构建

请参阅专用文档页面，详细了解同一文档视图转换。

构建同一文档视图转换

跨文档视图转换

当两个不同文档之间发生视图转换时，称为跨文档视图转换。这是 MPA 的典型特征。Chrome 126 及更高版本支持跨文档视图转换。

浏览器支持

  • Chrome：126。
  • Edge：126。
  • Firefox：不受支持。
  • Safari Technology Preview：受支持。

如何触发

如果两个网页都选择启用，同源跨文档导航会触发跨文档视图转换。换句话说，没有可调用的 API 来启动跨文档视图转换。当用户点击链接时，点击会触发视图转换。

如需选择启用，请使用以下 CSS 代码段：

@view-transition {
  navigation: auto;
}

示例

以下堆叠导航器示例是一个 MPA，它会在两个不同的文档之间使用跨文档视图转换。网页会推送到堆栈或弹出，具体取决于您是否要深入导航。

堆栈导航器演示的录制内容。需要 Chrome 126 或更高版本。

开始构建

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

构建跨文档视图转换