View Transition API 实现主题色过渡切换效果。

最小实现

流程：

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

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

        <!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