Element-Plus 主题切换动画实战：让换肤更丝滑

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

实现

基本效果

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

View Transitions API

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

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

js 复制代码

<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

js 复制代码

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

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

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

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

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

代码如下：