// 获取所有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：新页面视图的实时表示，它们都以与 或

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

::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 中的单个 meta 标记启用的：

开发者可以按照与上面所示相同的方式定义 ::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