当前位置： 首页 > news >正文

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

news 2026/5/11 9:45:23

文章目录

  • 实现
  • 圆形扩散过渡动画

实现一下 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默认的动画效果，不然它会导致我们自定义的动画效果无效~

在这里插入图片描述

最终得到圆形扩散的效果

<!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 返回一个 Promisetransition.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>

相关文章：

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

文章目录 实现圆形扩散过渡动画 实现一下 Element-UI 官网的主题切换动画加粗样式 实现 首先我们起一个 html 文件&#xff0c;写一个按钮&#xff0c;以及简单的背景颜色切换&#xff0c;来模拟主题的切换 想要实现过渡效果&#xff0c;需要先用到一个 JavaScript 的原生方…...

编程日记 2024/12/1 21:57:05

Golang 构建学习

Golang 构建学习 如何搭建Golang开发环境 1. 下载GOlang包 https://golang.google.cn/dl/ 在地址上下载Golang 2. 配置包环境 修改全局环境变量&#xff0c;GOPROXY&#xff0c;GOPATH&#xff0c;GOROOT GOPROXYhttps://goproxy.cn,direct GOROOT"" // go二进…...

编程日记 2024/12/1 21:53:01

VM Virutal Box的Ubuntu虚拟机与windows宿主机之间设置共享文件夹(自动挂载，永久有效）

本文参考如下链接 How to access a shared folder in VirtualBox? - Ask Ubuntu &#xff08;1&#xff09;安装增强功能&#xff08;Guest Additions&#xff09; 首先&#xff0c;在网上下载VBoxGuestAdditions光盘映像文件 下载地址&#xff1a;Index of http://…...

编程日记 2024/12/1 21:52:00

分析 系统滴答时钟（tickClock），设置72MHz系统周期，如何实现1毫秒的系统时间？

一、CubeMX相关配置 1.1 相关引脚配置 1.2 相关时钟数配置 1.3 打开程序源码 二、相关函数分析...

编程日记 2024/12/1 21:50:59

C++优选算法十七 多源BFS

1.单源最短路问题 一个起点一个终点。 定义&#xff1a;在给定加权图中&#xff0c;选择一个顶点作为源点&#xff0c;计算该源点到图中所有其他顶点的最短路径长度。 2.多源最短路问题 定义&#xff1a;多源最短路问题指的是在图中存在多个起点&#xff0c;需要求出从这些…...

编程日记 2024/12/1 21:49:58

Mongodb入门到放弃

Mongodb分片概括 分片在多台服务器上分布数据的方法&#xff0c; Mongodb使用分片来支持具有非常大的数据集和高吞吐量的操作的部署 具有大数据集和高吞吐量应用程序的数据库系统&#xff0c;可以挑战单台服务器的容量。 例如&#xff0c;高查询率可以耗尽服务器的cpu容量&…...

编程日记 2024/12/1 21:48:57

青藤云安全携手财信证券，入选金融科技创新应用优秀案例

11月29日&#xff0c;由中国信息通信研究院主办的第四届“金信通”金融科技创新应用案例评选结果正式发布。财信证券与青藤云安全联合提交的“基于RASP技术的API及数据链路安全治理项目”以其卓越的创新性和先进性&#xff0c;成功入选金融科技创新应用优秀案例。 据悉&#x…...

编程日记 2024/12/1 21:47:56

在CentOS系统中安装工具包的时候报错的解决方法

我刚装了一个新的虚拟机&#xff0c;打算安装一些工具出现了错误信息 执行的命令如下&#xff1a; yum install -y yum-utils device-mapper-persistent-data lvm2错误信息如下 Cannot find a valid baseurl for repo: base/7/x86_64搜索了一下原因有好几种。 一是网络不通…...

编程日记 2024/12/1 21:46:55

cad软件打不开报错cad acbrandres dll加载失败

一切本来很顺利哒 但是&#xff0c;当我用快捷方式打开时&#xff0c;就出现了这个错误。进入文件路径&#xff0c;是有这个的&#xff1b; 在文件路径直接打开&#xff0c;也会提示错误 原因竟然是我改了个名字&#xff1a; 随便选的文件路径&#xff0c;空的,文件名为Acr…...

编程日记 2024/12/1 21:45:54

14、保存与加载PyTorch训练的模型和超参数

文章目录 1. state_dict2. 模型保存3. check_point4. 详细保存5. Docker6. 机器学习常用库 1. state_dict nn.Module 类是所有神经网络构建的基类&#xff0c;即自己构建一个深度神经网络也是需要继承自nn.Module类才行&#xff0c;并且nn.Module中的state_dict包含神经网络中…...

编程日记 2024/12/1 21:42:51

【前端开发】JS+Vuew3请求列表数据并分页

应用技术&#xff1a;原生JavaScript Vue3 $(function () {ini(); });function ini() {const { createApp, ref, onMounted } Vue;createApp({setup() {const data ref({studentList: [],page: 1,pageSize: 10,});const getStudentList async (page, key) > {window.ons…...

编程日记 2024/12/1 21:41:50

Trimble X12助力电力管廊数据采集，为机器人巡视系统提供精准导航支持

地下电缆是一个城市重要的基础设施&#xff0c;它不仅具有规模大、范围广、空间分布复杂等特点&#xff0c;更重要的是它还承担着信息传输、能源输送等与人们生活息息相关的重要功能&#xff0c;也是一个城市赖以生存和发展的物质基础。 01、项目概述 本次项目是对某区域2公里左…...

编程日记 2024/12/1 21:40:50

Docker 清理镜像策略详解

文章目录 前言一、删除 Docker 镜像1. 查看当前镜像2. 删除单个镜像3. 删除多个镜像4. 删除所有未使用的镜像5. 删除悬空的 Docker 镜像6. 根据模式删除镜像7. 删除所有镜像 二、删除 Docker 容器1. 查找容器2. 删除一个或多个特定容器3. 退出时删除容器4. 删除所有已退出的容器…...

编程日记 2024/12/1 21:37:46

【Linux】TCP网络编程

目录 V1_Echo_Server V2_Echo_Server多进程版本 V3_Echo_Server多线程版本 V3-1_多线程远程命令执行 V4_Echo_Server线程池版本 V1_Echo_Server TcpServer的上层调用如下&#xff0c;和UdpServer几乎一样&#xff1a; 而在InitServer中&#xff0c;大部分也和UDP那里一样&…...

编程日记 2024/12/1 21:33:41

排序学习整理（2）

上集回顾 排序学习整理&#xff08;1&#xff09;-CSDN博客 2.3 交换排序 交换排序的基本思想是&#xff1a;根据序列中两个记录键值的比较结果&#xff0c;交换这两个记录在序列中的位置。 特点&#xff1a; 通过比较和交换操作&#xff0c;将键值较大的记录逐步移动到序列…...

编程日记 2024/12/1 21:32:40

AI蛋白质设计与人工智能药物设计

AI蛋白质设计与人工智能药物设计 AI蛋白质设计 一、蛋白质相关的深度学习简介 1.基础概念 1.1.机器学习简介&#xff1a;从手写数字识别到大语言模型 1.2.蛋白质结构预测与设计回顾 1.3.Linux简介 1.4.代码环境&#xff1a;VS code和Jupyter notebook* 1.5.Python关键概…...

编程日记 2024/12/1 21:31:38

IOS ARKit进行图像识别

先讲一下基础控涧&#xff0c;资源的话可以留言&#xff0c;抽空我把它传到GitHub上&#xff0c;这里没写收积分&#xff0c;竟然充值才能下载&#xff0c;我下载也要充值&#xff0c;牛&#xff01; ARSCNView 可以理解画布或者场景 1 配置 ARWorldTrackingConfiguration AR追…...

编程日记 2024/12/1 21:29:36

初级数据结构——二叉搜索树

目录 前言一、定义二、基本操作三、时间复杂度分析四、变体五、动态图解六、代码模版七、经典例题[1.——700. 二叉搜索树中的搜索](https://leetcode.cn/problems/search-in-a-binary-search-tree/)代码题解 [2.——938. 二叉搜索树的范围和](https://leetcode.cn/problems/ra…...

编程日记 2024/12/1 21:28:35

C++设计模式之组合模式中如何实现同一层部件的有序性

在组合模式中&#xff0c;为了实现同一层上部件的有序性&#xff0c;可以采取以下几种设计方法&#xff1a; 1. 使用有序集合 使用有序集合&#xff08;如 std::list、std::vector 或其他有序容器&#xff09;来存储和管理子部件。这种方法可以确保子部件按照特定顺序排列&am…...

编程日记 2024/12/1 21:26:33

duxapp RN 端使用AppUpgrade 进行版本更新

版本更新包含了组件和工具的组合 注册 下面这是 duxcms 入口文件检查更新的注册方法&#xff0c;注册的同时会检查更新 import {request,updateApp,userConfig } from ./utils// 检查app更新 setTimeout(async () > {if (process.env.TARO_ENV rn) {// eslint-disable-n…...

编程日记 2024/12/1 21:25:32

终极免费方案：ctfileGet一键破解城通网盘下载限速

终极免费方案&#xff1a;ctfileGet一键破解城通网盘下载限速 【免费下载链接】ctfileGet 获取城通网盘一次性直连地址 项目地址: https://gitcode.com/gh_mirrors/ct/ctfileGet 还在为城通网盘下载速度慢如蜗牛而烦恼吗&#xff1f;下载一个大文件要等上好几个小时&…...

编程新知 2026/5/11 9:44:45

AI智能光标：从感知-思考-执行架构到工程实践

1. 项目概述&#xff1a;从“铁爪光标大脑”看AI驱动的交互范式革新最近在GitHub上看到一个名为andeya/ironclaw-cursor-brain的项目&#xff0c;这个名字本身就充满了想象力——“铁爪光标大脑”。乍一看&#xff0c;它像是一个科幻概念&#xff0c;但深入了解后&#xff0c;你…...

编程新知 2026/5/11 4:29:53

AI研发团队“隐性崩溃”前的9个信号：SITS2026追踪18个月的142起项目衰变案例全复盘

更多请点击&#xff1a; https://intelliparadigm.com 第一章&#xff1a;AI研发团队“隐性崩溃”的本质定义与SITS2026研究框架 什么是“隐性崩溃”&#xff1f; AI研发团队的“隐性崩溃”并非指系统宕机或项目终止&#xff0c;而是指团队在表观正常运转下&#xff0c;持续丧…...

编程新知 2026/5/11 3:28:32

【奇点智能大会·治理白皮书首发】：基于27家头部AI企业的服务治理数据，验证出唯一有效的3维可观测性模型（QPS/Token耗时/上下文漂移）

更多请点击&#xff1a; https://intelliparadigm.com 第一章&#xff1a;大模型服务治理&#xff1a;奇点智能大会 在2024年奇点智能大会上&#xff0c;大模型服务治理成为核心议题。随着LLM推理服务规模化部署&#xff0c;如何统一调度、细粒度限流、多租户隔离与可观测性闭…...

编程新知 2026/5/11 2:44:28

【AI技能】跟着费曼学BEV鸟瞰图感知

&#x1f60f;★,:.☆(&#xffe3;▽&#xffe3;)/$:.★ &#x1f60f; 探智求真&#xff0c;学以致用。 欢迎来到我的博客&#xff0c;一起学习&#xff0c;共同进步。 喜欢的朋友可以关注一下&#xff0c;下次更新不迷路&#x1f95e; 文章目录&#x1f60f;1. 概述&#x…...

编程新知 2026/5/11 2:40:13

别再复制粘贴了！手把手教你从零搭建STM32F429 MDK5工程模板（附完整源码包）

从零构建STM32F429工程模板&#xff1a;避开新手90%的踩坑点 第一次拿到STM32F429开发板时&#xff0c;我盯着满屏的英文文档和零散的教程发愣——网上能找到的要么是过时的Keil4配置指南&#xff0c;要么直接丢给你一个现成工程文件。这种"复制粘贴式"的学习让我在后…...

编程新知 2026/5/11 0:53:32

告别虚拟机卡顿：在Windows 11的WSL2里为树莓派4B编译Automotive Grade Linux镜像

告别虚拟机卡顿&#xff1a;在Windows 11的WSL2里为树莓派4B编译Automotive Grade Linux镜像 嵌入式开发者在Windows平台上常面临一个尴尬处境&#xff1a;项目需要Linux环境&#xff0c;但物理机切换或虚拟机性能损耗让人头疼。去年我在为某车载HMI项目构建AGL镜像时&#xff…...

编程新知 2026/5/10 21:45:44

如何高效管理九大网盘文件：LinkSwift直链下载助手完整指南

如何高效管理九大网盘文件&#xff1a;LinkSwift直链下载助手完整指南 【免费下载链接】Online-disk-direct-link-download-assistant 一个基于 JavaScript 的网盘文件下载地址获取工具。基于【网盘直链下载助手】修改 &#xff0c;支持 百度网盘 / 阿里云盘 / 中国移动云盘 / …...

编程新知 2026/5/10 20:13:47

MAX86150 ECG/PPG数据采集实战：基于STM32F103的FIFO配置与多传感器数据融合解析

MAX86150 ECG/PPG数据采集实战&#xff1a;基于STM32F103的FIFO配置与多传感器数据融合解析 在可穿戴健康监测设备的开发中&#xff0c;如何高效处理多通道生物信号是工程师面临的核心挑战。MAX86150作为一款集成了ECG&#xff08;心电图&#xff09;和PPG&#xff08;光电容积…...

编程新知 2026/5/10 19:15:13

Vue项目里给二维码加Logo和改颜色？用vue-qr这个库5分钟搞定

Vue项目中5分钟实现带Logo和自定义颜色的二维码 在Web应用中集成二维码功能已经成为支付、分享、身份验证等场景的标配需求。对于Vue开发者来说&#xff0c;如何快速生成美观且实用的二维码&#xff0c;同时支持自定义Logo和颜色调整&#xff0c;是一个高频的开发任务。本文将带…...

编程新知 2026/5/10 19:01:31