Element-UI 官网的主题切换动画

文章目录


实现一下 Element-UI 官网的主题切换动画加粗样式

实现

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

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

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

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


圆形扩散过渡动画

接下来实现圆形过渡的效果,其实这个动画最终是展示::view-transition-new(root)这个伪元素,所以我们只需要让这个伪元素有原型扩散的过渡动画即可~那圆形扩散动画咋做呢?其实很简单,只需要将伪元素的半径,从0 -> 100%即可

代码如下

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

最终得到圆形扩散的效果

javascript 复制代码
<!DOCTYPE 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-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: 300,
              pseudoElement: "::view-transition-new(root)",
            }
          );
        });
      });
    </script>
  </body>
</html>
相关推荐
Yasin Chen2 天前
Unity UI坐标说明
ui·unity
眠りたいです3 天前
基于脚手架微服务的视频点播系统-数据管理与网络通信部分的预备工作
c++·qt·ui·微服务·云原生·架构·媒体
油炸自行车4 天前
【Qt】编写Qt自定义Ui控件步骤
开发语言·c++·qt·ui·自定义ui控件·qt4 自定义ui控件
IT古董5 天前
Vue + Vite + Element UI 实现动态主题切换:基于 :root + SCSS 变量的最佳实践
vue.js·ui·scss
yuanpan6 天前
认识跨平台UI框架Flutter和MAUI区别,如何选。
flutter·ui·maui
EndingCoder6 天前
Electron 高级 UI:集成 React 或 Vue.js
react.js·ui·electron·前端框架
我命由我123457 天前
Word - Word 的 5 种视图(页面视图、阅读视图、Web 版式视图、大纲视图、草稿视图)
ui·word·excel·photoshop·表格·ps·美工
CodingCos7 天前
【芯片设计-信号完整性 SI 学习 1.1.1 -- Unit Interval,比特周期】
学习·ui·si 比特周期
开开心心loky7 天前
[iOS] ViewController 的生命周期
macos·ui·ios·objective-c·cocoa
我命由我123457 天前
Excel 表格 - Excel 减少干扰、专注于内容的查看方式
学习·ui·excel·photoshop·表格·ps·美工