大家好，很高兴又见面了，我是"高级前端进阶"，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发，您的支持是我不断创作的动力。

今天给大家带来的主题是新API介绍，即 View Transitions API。话不多说，直接进入正题！

1.什么是 View Transitions

View Transition 是一种流行的设计选择，可减少用户的认知负荷，帮助用户留在当前上下文中，并减少在应用程序的状态或视图之间移动时感知到的加载延迟。

然而，在 Web 上创建视图转换历来都很困难。 单页应用程序 (SPA) 中的状态间转换往往涉及编写大量的 CSS 和 JavaScript ，因为本身的流程就非常复杂：

• 处理新旧内容的加载和定位
• 对旧状态和新状态进行动画处理以创建过渡
• 防止用户与旧内容的意外交互导致问题
• 转换完成后删除旧内容

由于新旧内容同时出现在 DOM 中，还存在可访问性问题，例如：阅读位置丢失、焦点混乱和奇怪的实时区域公告行为。 并且跨文档视图转换（即跨常规网站不同页面）是不可能的。

不可否认，CSS Transitions 和 Animations 在过去十年中彻底改变了网页动效，但并非一切都很容易。 而 View Transitions API 使用以下过程简化了这个流程：

• API 获取当前页面状态的快照。
• 根据需要更新 DOM ，例如：添加或删除元素。
• API 获取新页面状态的快照。
• API 使用默认淡入淡出或开发者自定义的任何 CSS 动画在两种状态之间进行动画处理。

开发者只需要像以前一样更新 DOM， 当 View Transitions API 可用于创建类似演示的效果时，通过几行附加代码可以逐步增强页面。

但是值得注意的是，当前该 API 是实验性的，但最近基于 Chromium 的浏览器支持页内（in-Page）、基于单文档（single-document） DOM 的效果。

Chrome 115+ 中还提供了用于导航的 ViewTransition API，并在各个页面加载之间提供动画，容易使用并且不需要任何 JavaScript。

Mozilla 和 Apple 尚未透露在 Firefox 和 Safari 中实现该 API 的意图。 任何没有 View Transitions API 的浏览器都将继续工作，因此该功能属于渐进增强。

2.新旧技术

老牌的开发者可能会对这种技术比较熟悉。 Microsoft 在 Internet Explorer 4.0（1997 年发布）中添加了元素和整个页面转换，并在 IE5.5（2000 年发布）中进行了进一步更新。 开发者可以使用标签添加类似 PowerPoint 的框、圆圈、擦拭、溶解、百叶窗、幻灯片、条带和螺旋：

<meta http-equiv="Page-Enter" content="progid:DXImageTransform.Microsoft.Iris(Motion='in', IrisStyle='circle')">
<meta http-equiv="Page-Exit" content="progid:DXImageTransform.Microsoft.Iris(Motion='out', IrisStyle='circle')">

奇怪的是，这项技术从未被广泛采用，非 Web 标准，可能当时 W3C 正处于起步阶段，开发人员很乐意使用大量其他 IE 特定技术！

3.创建页内过渡

接下来一起来看看如何使用 View Transitions API 技术来创建页面内的过渡效果。

假设 HTML 页面有两个 <article> 元素， ID 分别为 article1 和 article2：

<main>
  <div id="articleroot">
    <article id="article1">
      <h2>Article 1 content</h2>
      <figure>
        <img src="image1.jpg" width="800" height="500" alt="image" />
      </figure>
      <p>Lorem ipsum dolor sit amet...</p>
    </article>
    <article id="article2">
      <h2>Article 2 content</h2>
      <figure>
        <img src="image2.jpg" width="800" height="500" alt="image" />
      </figure>
      <p>Ut pretium ac orci nec dictum...</p>
    </article>
  </div>
</main>

switchArticle() 函数处理所有 DOM 更新。 它通过添加或删除 hidden 属性来显示或隐藏 Article 内容。 页面加载时，Article 由页面 URL 的 location.hash 确定，如果未设置，则根据第一个 <article> 元素确定：

// 获取所有article元素
const article = document.getElementsByTagName("article");
// 页面加载完成显示一个aticle
switchArticle();
// 显示当前article
function switchArticle(e) {
  const hash = e?.target?.hash?.slice(1) || location?.hash?.slice(1);
  Array.from(article).forEach((a, i) => {
    if (a.id === hash || (!hash && !i)) {
      a.removeAttribute("hidden");
    } else {
      a.setAttribute("hidden", "");
    }
  });
}

事件处理函数监听所有页面点击，并在用户点击带有 #hash 的链接时调用 switchArticle()：

// 监听click点击事件
document.body.addEventListener("click", (e) => {
  if (!e?.target?.hash) return;
  switchArticle(e);
});

可以通过将 switchArticle() 函数作为回调传递给
document.startViewTransition() 来更新此处理程序以使用视图转换（但是需要首先检查 API 是否可用）：

View Transitions API 的 startViewTransition() 方法：启动一个新的视图转换并返回一个 ViewTransition 对象来表示它。调用 startViewTransition() 时，将执行一系列步骤，如：视图转换过程中所述。

document.body.addEventListener("click", (e) => {
  if (!e?.target?.hash) return;
  if (document.startViewTransition) {
    // 使用 View Transition effect
    document.startViewTransition(() => switchArticle(e));
  } else {
    // View Transition 不可用
    switchArticle(e);
  }
});

document.startViewTransition() 获取初始状态的快照，运行 switchArticle()，获取新状态的新快照，并在两者之间创建默认的半秒淡入淡出。CSS 中提供以下选择器来定位旧状态和新状态：

::view-transition-old(root) {
  /* 淡出效果 */
}
::view-transition-new(root) {
  /* 淡入效果 */
}

• ::view-transition：视图转换覆盖的根，包含所有视图转换并位于所有其他页面内容顶部
• ::view-transition-old：旧页面视图的屏幕截图
• ::view-transition-new：新页面视图的实时表示，它们都以与 <img> 或 <video> 相同的方式渲染为替换内容，这意味着可以使用方便的属性（如对象适合和对象位置）进行样式设置。

比如，上面的示例将动画持续时间增加到一秒，以便淡入淡出效果更加明显：

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 1s;
}

视图转换组（根）可以同时将效果应用于 old 状态和 new 状态，尽管在大多数情况下开发者不太可能应用相同的动画。

4.异步 DOM 更新

传递给
document.startViewTransition() 的回调可以返回一个 Promise，因此异步更新是可能的。例如：

document.startViewTransition(async () => {
  const response = await fetch("/some-data");
  const json = await response.json();
  doDOMUpdates(json);
  // 更新dom
  await sendAnalyticsEvent();
});

上面代码示例会冻结页面，直到 Promise resolve，因此延迟可能会影响用户体验。在 .startViewTransition() 调用之外运行尽可能多的代码会更有效。比如下面的示例：

const response = await fetch("/some-data");
const json = await response.json();
document.startViewTransition(() => doDOMUpdates(json));
await sendAnalyticsEvent();

5.使用 Web Animations API

虽然 CSS 足以满足大多数效果，但 Web Animations API 允许在 JavaScript 中进行进一步的计时和效果控制。

document.startViewTransition() 返回一个运行 .ready Promise 的对象，当旧和新的伪元素可用时，该 Promise 会 resolve（注意第二个 .animate() 参数中的 pseudoElement 属性）。在以下示例中，ready 用于触发自定义循环显示视图转换，该转换从用户点击时光标的位置发出，动画由 Web 动画 API 提供。

// Store the last click event
let lastClick;
addEventListener("click", (event) => (lastClick = event));
function spaNavigate(data) {
  // 不支持此 API 的浏览器
  if (!document.startViewTransition) {
    updateTheDOMSomehow(data);
    return;
  }
  // 获取点击位置，或者回退到屏幕中间
  const x = lastClick?.clientX ?? innerWidth / 2;
  const y = lastClick?.clientY ?? innerHeight / 2;
  // 获取到最远角的距离
  const endRadius = Math.hypot(
    Math.max(x, innerWidth - x),
    Math.max(y, innerHeight - y),
  );
  // 创建 transition:
  const transition = document.startViewTransition(() => {
    updateTheDOMSomehow(data);
  });
  // 等待创建伪元素
  transition.ready.then(() => {
    // 为根的新视图设置动画
    document.documentElement.animate(
      {
        clipPath: [
          `circle(0 at ${x}px ${y}px)`,
          `circle(${endRadius}px at ${x}px ${y}px)`,
        ],
      },
      {
        duration: 500,
        easing: "ease-in",
        // Specify which pseudo-element to animate
        pseudoElement: "::view-transition-new(root)",
      },
    );
  });
}

如上面代码所示，ViewTransition 接口的 read-only 属性是一个 Promise，一旦伪元素树创建完毕并且过渡动画即将开始，该 Promise 就会 resolve。

如果转换无法开始，ready 将 reject ，当然此时可能是由于配置错误造成的，例如：重复的视图转换名称，或者传递给
Document.startViewTransition() 的回调抛出或返回 reject 的Promise 。

6.创建多页面导航过渡

当用户在多页面应用程序 (MPA)上的页面加载之间导航时，开发者还可以使用视图转换，即被称为用于导航的 ViewTransition API，但是开发者必须在 Chrome 115 中的 chrome://flags/ 中启用它（目前是针对开发人员的 Canary nightly 版本）。 该标志在浏览器的早期版本中也可用，但 API 可能丢失或不稳定。

该过程比页内转换更容易，因为它是通过 HTML <head> 中的单个 meta 标记启用的：

<meta name="view-transition" content="same-origin" />

开发者可以按照与上面所示相同的方式定义 ::view-transition-old 和 ::view-transition-new CSS 选择器。 除非开发者想使用 Web Animations API，否则依然不需任何 JavaScript

::view-transition-image-pair(root) {
  isolation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
  display: block;
}

Chrome 115 最终版发布时，导航 API 可能默认启用，也可能不启用。 但是开发者今天已经可以使用该技术，因为不支持该 API 的浏览器将回退到标准的非动画页面加载。

7.禁用动画

动画可能会让一些用户感到不适， 大多数操作系统提供用户首选项设置来禁用。 开发者也可以使用 CSS Preferred-reduced-motion 媒体查询来检测这一点并相应地关闭动画。

Preferred-reduced-motion CSS 媒体功能用于检测用户是否在其设备上启用了一项设置，以最大限度地减少不必要的运动量。 该设置用于向设备上的浏览器传达用户更喜欢删除、减少或替换基于运动的动画的界面。

比如下面的是：

@media (prefers-reduced-motion) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}

8.总结

View Transitions API 简化了在页面内和页面间更改元素状态时的动画。 这种类型的转换以前需要通过大量的 JavaScript 实现，而且还可能破坏浏览器导航，例如：后退按钮。

现在借助于 View Transitions API 一切变得非常容易。但是 View Transitions API 还比较新， 无法保证它会保持不变、成为 W3C 标准或在 Firefox 和 Safari 中得到实现。 然而，今天开发者已经可以使用该 API，因为它是一个渐进增强的特性，在低版本的浏览器中能保证最基础的用户体验。

因为篇幅有限，关于 View Transitions API 的用法和特性文章并没有过多展开，如果有兴趣，可以在我的主页继续阅读，同时文末的参考资料提供了大量优秀文档以供学习。最后，欢迎大家点赞、评论、转发、收藏，您的支持是我不断创作的动力。

参考资料

https://www.sitepoint.com/view-transitions-api-introduction/

https://developer.mozilla.org/en-US/docs/Web/API/View_Transitions_API

https://developer.mozilla.org/en-US/docs/Web/API/View_Transitions_API

https://developer.mozilla.org/en-US/docs/Web/API/ViewTransition/ready

https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion

https://12daysofweb.dev/2022/view-transitions-api/

https://developer.chrome.com/blog/spa-view-transitions-land/

https://ali-akhtar.medium.com/uikit-animation-part-1-8a74221d5dc0