使用 View Transition API 实现平滑过渡

Bramus

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

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

  • 商品详情页面上的缩略图，可过渡为商品详情页面上的全尺寸商品图片。
  • 一个固定的导航栏，当您从一个网页导航到另一个网页时，该导航栏会一直显示在屏幕上。
  • 一个网格，其中的项目会随着您过滤而移动位置。
使用 View Transition API 创建的过渡效果。试用演示网站。需要 Chrome 111 或更高版本。

实现视图过渡

视图过渡效果不与特定的应用架构或框架相关联，不仅可以在单个文档中触发，还可以在两个不同的文档之间触发。

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

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

这两种类型的不同之处在于触发方式。

同文档视图过渡

当视图转换在单个文档上运行时，称为同文档视图转换。单页应用 (SPA) 中通常会发生这种情况。Chrome 111 及更高版本支持同文档视图过渡。

Browser Support

  • Chrome: 111.
  • Edge: 111.
  • Firefox Technology Preview: supported.
  • Safari: 18.

Source

如何触发

通过调用 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 及更高版本支持跨文档视图过渡。

Browser Support

  • Chrome: 126.
  • Edge: 126.
  • Firefox: not supported.
  • Safari: 18.2.

Source

如何触发

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

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

@view-transition {
  navigation: auto;
}

示例

以下 Stack Navigator 示例是一个 MPA，它使用跨文档视图转换在两个不同的文档之间进行转换。根据您是否要深入浏览，网页会被推送到堆栈或从堆栈中弹出。

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

开始构建

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

构建跨文档视图过渡