利用 View Transition API 实现平滑流畅的主题色过渡切换效果。

最小实现

这段代码是 View Transition API 的最小实现。复制为 html 文件，打开即可看到效果。

流程：

startViewTransition 函数执行，并记住当前页面的“快照”
执行回调函数，当“视图更新”完成后，会触发 ::view-transition-old 和 ::view-transition-new 的动画
动画结束后，视图更新完成

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
 
  <style>
    @keyframes opacity-fade-out {
      to {
        opacity: 0;
      }
    }
 
    ::view-transition-old(root) {
      animation: opacity-fade-out 1s ease-out;
    }
  </style>
 
  <script>
    window.addEventListener('DOMContentLoaded', () => {
      document.querySelector('#toggle').addEventListener('click', () => {
        document.startViewTransition(() => {
          if (document.documentElement.style.backgroundColor === 'black') {
            document.documentElement.style.backgroundColor = 'white';
          } else {
            document.documentElement.style.backgroundColor = 'black';
          }
        });
      });
    });
  </script>
 
  <body>
    <button id="toggle">toggle</button>
  </body>
</html>

兼容性

图片预览

示例地址

github: first-view-transition [预览]

参考

MDN View Transition API