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

实现效果

实现过程

前提需要引入好 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 / 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>