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>

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

::view-transition-old(root), /* 舊視圖*/
::view-transition-new(root) { /* 新視圖*/
  animation-duration: 2s;
}

<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() {
  // 創(chuàng)建一個視圖過渡動畫，用于在切換深色模式時優(yōu)化用戶體驗
  const transition = document.startViewTransition(() => {
    // 切換HTML文檔的dark類，以激活或停用深色模式
    document.documentElement.classList.toggle('dark')
  })

  // 當視圖過渡動畫準備就緒時執(zhí)行以下代碼
  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
    // 計算過渡動畫結(jié)束時的圓半徑，確保覆蓋整個視口
    const endRadius = Math.hypot(
      Math.max(x, innerWidth - x),
      Math.max(y, innerHeight - y),
    )
    // 創(chuàng)建clipPath數(shù)組，定義了過渡動畫的起始和結(jié)束形狀
    const clipPath = [
      `circle(0 at ${x}px ${y}px)`,
      `circle(${endRadius}px at ${x}px ${y}px)`,
    ]
    // 在HTML文檔的根元素上啟動一個動畫，根據(jù)當前是否為深色模式來決定動畫的方向
    document.documentElement.animate(
      {
        clipPath: isDark.value ? clipPath.reverse() : clipPath,
      },
      {
        duration: 400, // 動畫持續(xù)時間
        pseudoElement: isDark.value
          ? '::view-transition-old(root)'
          : '::view-transition-new(root)', // 根據(jù)深色模式狀態(tài)選擇偽元素
      },
    )
  })
}
</script>

<style>
::view-transition-new(root),
::view-transition-old(root) {
  /* 關(guān)閉默認動畫，否則影響自定義動畫的執(zhí)行 */
  animation: none !important;
}

/*黑暗模式下，讓舊節(jié)點的層級變高，否則會導致動畫出不來*/
.dark::view-transition-old(root) {
  z-index: 100;
}
</style>

<style scoped>
.switch {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
</style>