当前位置：首页 > 科技 > 软件

饿了么面试官：实现一下 Element-UI 官网的主题切换动画！

来源：责编：时间：2024-07-15 17:15:39 538观看

导读前言大家好，我是林三心，用最通俗易懂的话讲最难的知识点是我的座右铭，基础是进阶的前提是我的初心。最近看到 ElementPlus 官网上的切换主题方式非常有趣，这是一个过渡的动画效果。图片所以在网上查了一番，找到基本的实现

前言

大家好，我是林三心，用最通俗易懂的话讲最难的知识点是我的座右铭，基础是进阶的前提是我的初心。

最近看到 ElementPlus 官网上的切换主题方式非常有趣，这是一个过渡的动画效果。

图片

所以在网上查了一番，找到基本的实现方法。

实现

基本效果

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

图片

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

图片

document.startViewTransition

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

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

图片

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

图片

过渡动画效果

我们可以应用一下这个 API。

图片

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

图片

圆形扩散过渡动画

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

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

图片

代码如下：

图片

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

图片

最终得到圆形扩散的效果：

完整代码

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

本文链接：//www.dmpip.com//www.dmpip.com/showinfo-26-100986-0.html饿了么面试官：实现一下 Element-UI 官网的主题切换动画！

声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。邮件：2376512515@qq.com

上一篇： VueConf 2024 落幕，7大模块讲解 Vue 未来生态变化！

下一篇：想看源码但是无从下口怎么办？

标签：

热门焦点

石头智能洗地机A10 Plus体验：双向自清洁治好了我的懒癌

一、前言和介绍专为家庭请假懒人而生的石头科技在近日又带来了自己的全新旗舰新品，石头智能洗地机A10 Plus。从这个产品名上就不难看出，这次石头推出的并不是常见的扫地机器
线程通讯的三种方法！通俗易懂

线程通信是指多个线程之间通过某种机制进行协调和交互，例如，线程等待和通知机制就是线程通讯的主要手段之一。在 Java 中，线程等待和通知的实现手段有以下几种方式：Object 类下
服务存储设计模式：Cache-Aside模式

Cache-Aside模式一种常用的缓存方式，通常是把数据从主存储加载到KV缓存中，加速后续的访问。在存在重复度的场景，Cache-Aside可以提升服务性能，降低底层存储的压力，缺点是缓存和底
19个 JavaScript 单行代码技巧，让你看起来像个专业人士

今天这篇文章跟大家分享18个JS单行代码，你只需花几分钟时间，即可帮助您了解一些您可能不知道的 JS 知识，如果您已经知道了，就当作复习一下，古人云，温故而知新嘛。现在，我们就开始今
虚拟键盘 API 的妙用

你是否在遇到过这样的问题：移动设备上有一个固定元素，当激活虚拟键盘时，该元素被隐藏在了键盘下方？多年来，这一直是 Web 上的默认行为，在本文中，我们将探讨这个问题、为什么会发生
一文搞定Java NIO，以及各种奇葩流

大家好，我是哪吒。很多朋友问我，如何才能学好IO流，对各种流的概念，云里雾里的，不求甚解。用到的时候，现百度，功能虽然实现了，但是为什么用这个？不知道。更别说效率问题了~下次再遇到，
消息称小米汽车开始筛选交付中心：需至少120个车位

IT之家 7 月 7 日消息，日前，有微博简介为“汽车行业从业者、长三角一体化拥护者”的微博用户 @长三角行健者发文表示，据经销商集团反馈，小米汽车目前
超闭合精工铰链彻底消灭缝隙三星Galaxy Z Flip5与Galaxy Z Fold5发布

2023年7月26日，三星电子正式发布了Galaxy Z Flip5与Galaxy Z Fold5。三星新一代折叠屏手机采用超闭合精工铰链，让折叠后的缝隙不再可见。同时，配合处
2299元起！iQOO Pad明晚首销：性能最强天玑平板

5月23日，iQOO如期举行了新品发布会，除了首发安卓最强旗舰处理器的iQOO Neo8系列新机外，还在发布会上推出了旗下首款平板电脑——iQOO Pad，其最大的卖点