使用vue3实现element-plus的主题切换效果
作者：szx的开发笔记
先看实现效果
实现过程
前提需要引入好 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文档：Document：startViewTransition() 方法 - Web API | MDN
通过调用 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 / 2
const 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 表示画一个圆形，更多图像可参考：clip-path - CSS：层叠样式表 | MDN
以上就是使用vue3实现element-plus的主题切换效果的详细内容，更多关于vue3 element-plus主题切换的资料请关注脚本之家其它相关文章！