如何在浏览器中使用 View Transitions API 实现无缝页面动画

View Transitions API 是一项新的 Web 平台功能，可在 Web 上实现无缝、类似原生的页面过渡。此 API 自 2023 年起可在 Chrome 和其他基于 Chromium 的浏览器中使用，旨在提升单页应用 (SPA) 甚至多页应用 (MPA) 的感知响应速度。

什么是 View Transitions API？

View Transitions API 允许您使用浏览器内置的支持来为 DOM 状态之间的变化添加动画效果。与使用 JavaScript 或 CSS 手动制作动画不同，它原生处理快照和过渡效果，使其更加流畅且易于实现。

浏览器支持

此功能目前已在 Chromium 浏览器（Chrome、Edge）中受支持，Firefox 和 Safari 也正在开发中。请在实施前进行功能检测。

if (!document.startViewTransition) {
  console.warn("View Transitions API is not supported in this browser.");
}

基本示例

要创建基本视图转换：

document.querySelector("button").addEventListener("click", () => {
  if (!document.startViewTransition) return;

  document.startViewTransition(() => {
    document.body.classList.toggle("dark");
  });
});

使用适当的 CSS：

html {
  transition: background-color 0.4s ease;
}

.dark {
  background-color: #111;
  color: #fff;
}

动画特定元素

您可以使用该属性为想要在状态之间进行动画处理的元素分配自定义名称view-transition-name。

<img src="img1.jpg" style="view-transition-name: hero-img;" />

当 DOM 更新时（例如，用户点击导航或显示不同的内容），浏览器将使用相同的状态对元素进行动画处理view-transition-name。

与 React 一起使用

要在 React 中使用它，您需要使用 API 手动包装状态更改：

function App() {
  const [dark, setDark] = useState(false);

  const toggleTheme = () => {
    if (document.startViewTransition) {
      document.startViewTransition(() => {
        setDark(prev => !prev);
      });
    } else {
      setDark(prev => !prev);
    }
  };

  return (
    <div className={dark ? "dark" : ""}>
      <button onClick={toggleTheme}>Toggle Theme</button>
    </div>
  );
}

潜在用例

• 主题开关（亮/暗）
• SPA 中的页面或选项卡转换
• 图片库过渡
• 具有增强用户体验的多页导航

后备处理

document.startViewTransition如果不受支持，请始终包含后备路径，以便您的应用程序对所有用户保持功能。

结论

View Transitions API 是一款功能强大的新工具，它可以帮助现代前端开发者创建流畅易用的过渡效果，而无需依赖复杂的库。随着浏览器支持的不断提升，它有望成为 Web 上丰富用户界面的标准方法。