使用 View Transition API 实现平滑过渡

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

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

  • 缩略图图片,在商品详情页面上转换为完整尺寸的商品图片。
  • 一个固定的导航栏,当您从一个页面导航到另一个页面时,导航栏始终保持不变。
  • 一个网格,其中的项在您过滤时位置会移动。
<ph type="x-smartling-placeholder">
</ph>
使用 View Transition API 创建的转场效果。试用演示网站。需要 Chrome 111 或更高版本。

实现视图转换

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

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

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

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


同文档视图转换

针对单个文档运行视图转换称为“同文档视图转换”。单页应用 (SPA) 中通常就属于这种情况。Chrome 111 及更高版本支持同文档视图过渡。

浏览器支持

  • Chrome:111。 <ph type="x-smartling-placeholder">
  • Edge:111。 <ph type="x-smartling-placeholder">
  • Firefox:不支持。 <ph type="x-smartling-placeholder">
  • Safari:18。 <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">
</ph>
卡片演示的录制。需要 Chrome 111 或更高版本。

开始构建

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

构建同文档视图过渡


跨文档视图转换

两个不同文档之间的视图转换称为“跨文档视图转换”。这对于 MPA 来说是典型的。Chrome 126 及更高版本支持跨文档视图转换。

浏览器支持

  • Chrome:126。 <ph type="x-smartling-placeholder">
  • 边缘:126。 <ph type="x-smartling-placeholder">
  • Firefox:不支持。 <ph type="x-smartling-placeholder">
  • Safari:不支持。 <ph type="x-smartling-placeholder">

触发方式

跨文档视图转换由同源跨文档导航触发(如果两个页面都选择启用)。换句话说,没有可调用的 API 来启动跨文档视图转换。当用户点击某个链接时,此点击会触发视图过渡。

如需选择启用,请使用以下 CSS 代码段:

@view-transition {
  navigation: auto;
}

示例

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

<ph type="x-smartling-placeholder">
</ph>
Stack Navigator 演示的录制。需要 Chrome 126 或更高版本。

开始构建

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

构建跨文档视图转换