Element-Plus 主题切换动画实战：让换肤更丝滑本文使用 View Transition API 实现 Elem

最近，我注意到ElementPlus官网上的主题切换方式颇具创意，特别是那过渡动画效果，让人眼前一亮。经过一番网络搜寻，我找到了实现Element-UI官网主题切换动画的基本方法。首先，我们创建一个HTML文件，添加一个按钮，并编写简单的背景颜色切换代码，以此模拟主题的切换效果。

实现

基本效果

为实现element-plus主题切换这样一个动画效果，我们可以使用到web api提供的一个

View Transitions API

mdn上官方的详细介绍 View Transitions API - Web API | MDN

首先我们起一个 html 文件，写一个按钮，以及简单的背景颜色切换，来模拟主题的切换

<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    :root {
      /* 默认亮主题 */
      --bg-color: #fff;
      background: var(--bg-color);
    }

    :root.dark {
      --bg-color: #000;
    }
  </style>
</head>

<body>
  <button id="themeButton">Toggle Theme</button>
  <script>
    const themeButton = document.getElementById('themeButton');

    themeButton.addEventListener('click', () => {
      document.documentElement.classList.toggle('dark');
    });
  </script>
</body>

</html>

可以看到实现了最简单的主题切换效果。

document.startViewTransition

想要实现过渡效果，需要先用到一个 JavaScript 的原生方法：document.startViewTransition。

这个方法是用来做动画过渡效果的。

通过调用 API，让浏览器为新旧两种不同视图分别捕获并建立了快照 (即 ::view-transition-old(root)旧快照和 ::view-transition-new(root) 新快照)，而后新旧两快照在 ::view-transition-image-pair(root) 容器中完成转场动画的过渡。动画结束后则删除其相关伪元素 (快照和容器)

过渡动画效果

我们可以应用一下这个 API

    const themeButton = document.getElementById('themeButton');

    themeButton.addEventListener('click', () => {
      // 执行切换主题的操作
      document.startViewTransition(() => {
        // 动画过渡切换主题色
        document.documentElement.classList.toggle('dark');
      });
    });
  </script>

现在去切换主题颜色，发现有过渡效果了~

圆形扩散过渡动画接下来实现圆形过渡的效果，其实这个动画最终是展示::view-transition-new(root)这个伪元素，所以我们只需要让这个伪元素有原型扩散的过渡动画即可~

那圆形扩散动画咋做呢？其实很简单，只需要将伪元素的半径，从0 -> 100%即可

代码如下：

    const themeButton = document.getElementById('themeButton');

    themeButton.addEventListener('click', (e) => {
      // 执行切换主题的操作
      const transition = document.startViewTransition(() => {
        // 动画过渡切换主题色
        document.documentElement.classList.toggle('dark');
      });

      // document.startViewTransition 的ready 返回一个 Promise
      transition.ready.then(() => {
        // 获取鼠标的坐标
        const { clientX, clientY } = e;

        // 计算最大半径
        const radius = Math.hypot(
          Math.max(clientX, innerWidth - clientX),
          Math.max(clientY, innerHeight - clientY)
        );

        // 圆形动画扩散开始
        document.documentElement.animate(
          [
            { clipPath: `circle(0% at ${clientX}px ${clientY}px)` },
            { clipPath: `circle(${radius}px at ${clientX}px ${clientY}px)` }
          ],
          // 设置时间，已经目标伪元素
          {
            duration: 300,
            pseudoElement: "::view-transition-new(root)"
          }
        );
      });
    });
  </script>

并且我们需要取消掉 document.startViewTransition默认的动画效果，不然它会导致我们自定义的动画效果无效~

    ::view-transition-old(root) {
      /*关闭默认动画 */
      animation: none;
    }

最终得到圆形扩散的效果

完整代码

<html lang="en">
 
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <style>
    :root {
      /* 默认亮主题 */
      --bg-color: #fff;
      background-color: var(--bg-color);
    }
 
    :root.dark {
      /* 暗主题 */
      --bg-color: #000;
    }
 
    ::view-transition-new(root),
    ::view-transition-old(root) {
      /* 关闭默认动画 */
      animation: none;
    }
  </style>
</head>
 
<body>
  <button id="themeButton">切换主题</button>
  <script>
    const themeButton = document.getElementById("themeButton");
    themeButton.addEventListener("click", (e) => {
      // 执行切换主题的操作
      const transition = document.startViewTransition(() => {
        // 动画过渡切换主题色
        document.documentElement.classList.toggle("dark");
      });
 
      // document.startViewTransition 的 ready 返回一个 Promise
      transition.ready.then(() => {
        // 获取鼠标的坐标
        const { clientX, clientY } = e;
 
        // 计算最大半径
        const radius = Math.hypot(
          Math.max(clientX, innerWidth - clientX),
          Math.max(clientY, innerHeight - clientY)
        );
 
        // 圆形动画扩散开始
        document.documentElement.animate(
          {
            clipPath: [
              `circle(0% at ${clientX}px ${clientY}px)`,
              `circle(${radius}px at ${clientX}px ${clientY}px)`,
            ],
          },
          // 设置时间，已经目标伪元素
          {
            duration: 500,
            pseudoElement: "::view-transition-new(root)",
          }
        );
      });
    });
  </script>
</body>
 
</html>

小tips（Cursor无限续杯）

AI编辑神器，Cursor无限续杯，白嫖白嫖白嫖！！！