vue3+element-plus暗黑模式切换动画圆弧过渡

vue3+element-plus暗黑模式切换动画圆弧过渡

效果

html

html 复制代码
 <div class="toggle" ref="switchRef" @click.stop="toggleDark()">
   <el-icon v-show="!isDark" :size="30"><Moon /></el-icon>
   <el-icon v-show="isDark" :size="30"><Sunny /></el-icon>
 </div>

ts

javascript 复制代码
import { useDark } from '@vueuse/core';
const isDark = useDark();

//获取切换元素的ref
const switchRef = ref<HTMLElement>();
const toggleDark = () => {
  // 若浏览器不支持 View Transitions
  if (!document.startViewTransition) {
    return true;
  }
  return new Promise(resolve => {
    const switchEl = switchRef.value as HTMLElement;
    const rect = switchEl.getBoundingClientRect();
    const x = rect.left + rect.width / 2;
    const y = rect.top + rect.height / 2;
    const radius = Math.hypot(Math.max(x, innerWidth - x), Math.max(y, innerHeight - y));
    const transition = document.startViewTransition(() => {
      resolve(true);
    });

    transition.ready.then(() => {
      const clipPath = [`circle(0px at ${x}px ${y}px)`, `circle(${radius}px at ${x}px ${y}px)`];
      document.documentElement.animate(
        {
          clipPath,
        },
        {
          duration: 400,
          easing: 'ease-in',
          pseudoElement: '::view-transition-new(root)',
        }
      );
      isDark.value = !isDark.value;
    });
  });
};
相关推荐
excel10 小时前
为什么在 Three.js 中平面能产生“起伏效果”?
前端
excel11 小时前
Node.js 断言与测试框架示例对比
前端
天蓝色的鱼鱼12 小时前
前端开发者的组件设计之痛:为什么我的组件总是难以维护?
前端·react.js
codingandsleeping12 小时前
使用orval自动拉取swagger文档并生成ts接口
前端·javascript
石金龙13 小时前
[译] Composition in CSS
前端·css
白水清风13 小时前
微前端学习记录(qiankun、wujie、micro-app)
前端·javascript·前端工程化
Ticnix13 小时前
函数封装实现Echarts多表渲染/叠加渲染
前端·echarts
用户221520442780013 小时前
new、原型和原型链浅析
前端·javascript
阿星做前端13 小时前
coze源码解读: space develop 页面
前端·javascript
叫我小窝吧13 小时前
Promise 的使用
前端·javascript