使用 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: 144.
  • 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