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

使用vue3实现element-plus的主题切换特效

news 来源：原创 2025/7/5 0:28:12

先看实现效果

在这里插入图片描述

实现过程

前提需要引入好 element-plus，并导入element的黑色主题CSS

示例，再 main.js 中引入

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import 'element-plus/theme-chalk/dark/css-vars.css' // 黑色主题app.use(ElementPlus, {locale: locale,size: Cookies.get('size') || 'default'
})

接着编写下面的基础代码

<template><div><el-switch v-model='value1' class='switch' @change='changeSwitch'><template #active-action><el-icon><Moon /></el-icon></template><template #inactive-action><el-icon><Sunny /></el-icon></template></el-switch></div>
</template><script setup>
let value1 = ref(false)function changeSwitch() {document.documentElement.classList.toggle('dark')
}
</script>
<style scoped lang='scss'>
.switch {position: absolute;left: 200px;top: 200px;
}
</style>

现在当切换 switch 时，背景颜色会直接进行黑白切换

在这里插入图片描述

从动画可以看到，现在是没有任何过渡效果的

我们可以使用 document.startViewTransition 很简单的就可以加上过渡效果，document.startViewTransition 接收一个函数参数，再函数内部写上操作DOM的逻辑代码即可实现一个默认的过度效果

function changeSwitch() {document.startViewTransition(() => {document.documentElement.classList.toggle('dark')})
}

现在就有了一个默认的过渡效果

在这里插入图片描述

为什么使用了 document.startViewTransition 就会有一个动画效果呢

MDN文档：https://developer.mozilla.org/zh-CN/docs/Web/API/Document/startViewTransition

在这里插入图片描述

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

在这里插入图片描述

我们也可以控制默认的动画时长

::view-transition-old(root), /* 旧视图*/
::view-transition-new(root) { /* 新视图*/animation-duration: 2s;
}

了解了这些，现在想点击按钮，实现一个扩散圆来实现主题切换效果，只需要根据按钮位置，计算圆的半径，然后设置 ::view-transition-new(root) 这个伪元素的动画效果，让圆从 0% 到 100%即可

完整代码

<template><div><el-switch v-model='isDark' class='switch' ref='switchRef' @change='changeSwitch'><template #active-action><el-icon><Moon /></el-icon></template><template #inactive-action><el-icon><Sunny /></el-icon></template></el-switch></div>
</template><script setup>
import { ref } from 'vue'let isDark = ref(false)
let switchRef = ref(null)function changeSwitch() {// 创建一个视图过渡动画，用于在切换深色模式时优化用户体验const transition = document.startViewTransition(() => {// 切换HTML文档的dark类，以激活或停用深色模式document.documentElement.classList.toggle('dark')})// 当视图过渡动画准备就绪时执行以下代码transition.ready.then(() => {// 获取switch组件的DOM元素，用于计算过渡动画的起点const switchElement = switchRef.value?.$el// 计算switch组件中心点的坐标const rect = switchElement.getBoundingClientRect()const x = rect.left + rect.width / 2const y = rect.top + rect.height / 2// 计算过渡动画结束时的圆半径，确保覆盖整个视口const endRadius = Math.hypot(Math.max(x, innerWidth - x),Math.max(y, innerHeight - y),)// 创建clipPath数组，定义了过渡动画的起始和结束形状const clipPath = [`circle(0 at ${x}px ${y}px)`,`circle(${endRadius}px at ${x}px ${y}px)`,]// 在HTML文档的根元素上启动一个动画，根据当前是否为深色模式来决定动画的方向document.documentElement.animate({clipPath: isDark.value ? clipPath.reverse() : clipPath,},{duration: 400, // 动画持续时间pseudoElement: isDark.value? '::view-transition-old(root)': '::view-transition-new(root)', // 根据深色模式状态选择伪元素},)})
}
</script><style>
::view-transition-new(root),
::view-transition-old(root) {/* 关闭默认动画，否则影响自定义动画的执行 */animation: none !important;
}/*黑暗模式下，让旧节点的层级变高，否则会导致动画出不来*/
.dark::view-transition-old(root) {z-index: 100;
}
</style><style scoped>
.switch {position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);
}
</style>

circle 表示画一个圆形，更多图像可参考

https://developer.mozilla.org/zh-CN/docs/Web/CSS/clip-path#%E5%BD%A2%E5%BC%8F%E8%AF%AD%E6%B3%95

关于更多的 document.documentElement.animate 知识可参考

https://developer.mozilla.org/zh-CN/docs/Web/API/Element/animate

先看实现效果

实现过程

相关文章：