.net网站内容管理系统,wordpress 名片插件,微信网站 详解,奉贤免费网站建设文章目录 实现圆形扩散过渡动画 实现一下 Element-UI 官网的主题切换动画加粗样式
实现
首先我们起一个 html 文件#xff0c;写一个按钮#xff0c;以及简单的背景颜色切换#xff0c;来模拟主题的切换 想要实现过渡效果#xff0c;需要先用到一个 JavaScript 的原生方… 文章目录 实现圆形扩散过渡动画 实现一下 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 langenheadmeta charsetUTF-8 /meta nameviewport contentwidthdevice-width, initial-scale1.0 /titleDocument/titlestyle: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/headbodybutton idthemeButton切换主题/buttonscriptconst 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
