查看转换 API

长期以来，原生应用拥有许多我们这些 Web 开发者梦寐以求的开箱即用功能，从更佳的硬件集成到美观流畅的页面过渡效果，不一而足。然而，近几年 Web 环境变化日新月异，一项最新进展（目前仅适用于 Chrome 和 Edge 浏览器）终于让我们能够实现漂亮的页面过渡效果。我指的当然是View Transition API。

什么是视图转换 API？

该 API 提供了一种页面间动画效果的方法，目前仅支持单页应用(SPA)，但未来将支持所有同源页面之间的过渡效果。默认情况下，动画效果是简单的淡入淡出，但您可以使用 CSS 或 JavaScript 编写更复杂、更有趣的动画。例如，元素移动到新的位置，或者内容通过变换进入/离开屏幕，就像我的演示中那样。

API 通过 JS（对于 SPA）调用，并使用该startViewTransition函数。

视图转换 API 的工作原理是什么？

这种过渡效果是通过拍摄网站当前状态的快照（类似于图像）和即将加载页面的快照，然后在两者之间添加动画来实现的。简单的淡入淡出和全页过渡（如我的示例所示）都比较容易实现，但更复杂的效果可以通过将快照拆分成多个命名图层并分别设置动画来实现。我建议您查看Jake Archibald的这个演示网站，以了解其功能。

我可以在我的项目中使用 Transition API 吗？

当然！但是……

截至撰写本文时，该 API 仅适用于 Chromium，而且即使在 Chromium 中也仅部分支持（仅限单页应用）。目前，我建议先进行实验，为该功能的正式上线做好准备，甚至可以在您可以控制开发环境的项目中使用它，例如 Electron。

当然，你可以检查 API 是否受支持，如果不受支持则使用备用方案，但我不太喜欢对旧版浏览器进行 JavaScript 检查。

// Check to see if API is supported
if (document.startViewTransition) {
  // start transition
  const transition = document.startViewTransition(() => navigate(url));

  // when transition start run animation
  transition.ready.then(() => {
    document.documentElement.animate(
      // logic for animation
    );
  });
} else {
  // fallback for old browser
  navigate(url);
}

当至少一个浏览器全面支持页面间无缝衔接时，推广起来就容易多了。虽然旧版浏览器会忽略一些 CSS 代码，但在此之前……

鳍

感谢您阅读并与我一起探索新的 Web 标准。随着 Web 应用越来越像一流应用，像这样的小改动将极大地提升 PWA 和网站的原生体验和流畅度。

非常感谢您的阅读。如果您想在 Dev 之外与我联系，这是我的Twitter和LinkedIn 账号，欢迎来打个招呼 😊。