feat: 主题切换动画 (#176)

Co-authored-by: pany <panyang@mafengwo.com>

src/components/ThemeSwitch/index.vue

@@ -1,12 +1,28 @@
 <script lang="ts" setup>
-import { useTheme } from "@/hooks/useTheme"
+import { type ThemeName, useTheme } from "@/hooks/useTheme"
 import { MagicStick } from "@element-plus/icons-vue"
 
 const { themeList, activeThemeName, setTheme } = useTheme()
+
+const handleChangeTheme = ({ clientX, clientY }: MouseEvent, themeName: ThemeName) => {
+  const maxRadius = Math.hypot(
+    Math.max(clientX, window.innerWidth - clientX),
+    Math.max(clientY, window.innerHeight - clientY)
+  )
+  const style = document.documentElement.style
+  style.setProperty("--v3-theme-x", clientX + "px")
+  style.setProperty("--v3-theme-y", clientY + "px")
+  style.setProperty("--v3-theme-r", maxRadius + "px")
+  const handler = () => {
+    setTheme(themeName)
+  }
+  // @ts-expect-error
+  document.startViewTransition ? document.startViewTransition(handler) : handler()
+}
 </script>
 
 <template>
-  <el-dropdown trigger="click" @command="setTheme">
+  <el-dropdown trigger="click">
     <div>
       <el-tooltip effect="dark" content="主题模式" placement="bottom">
         <el-icon :size="20">
@@ -20,7 +36,11 @@ const { themeList, activeThemeName, setTheme } = useTheme()
           v-for="(theme, index) in themeList"
           :key="index"
           :disabled="activeThemeName === theme.name"
-          :command="theme.name"
+          @click="
+            (e) => {
+              handleChangeTheme(e, theme.name)
+            }
+          "
         >
           <span>{{ theme.title }}</span>
         </el-dropdown-item>

src/styles/index.scss

@@ -10,6 +10,8 @@
 @import "./theme/register.scss";
 // mixin
 @import "./mixins.scss";
+// View Transition
+@import "./view-transition.scss";
 
 // 业务页面几乎都应该在根元素上挂载 class="app-container"，以保持页面美观
 .app-container {

src/styles/view-transition.scss

@@ -0,0 +1,20 @@
+/** 控制切换主题时的动画效果（只在较新的浏览器上生效，例如 Chrome 111+） */
+
+::view-transition-old(root) {
+  animation: none;
+  mix-blend-mode: normal;
+}
+
+::view-transition-new(root) {
+  animation: 0.5s ease-in clip-animation;
+  mix-blend-mode: normal;
+}
+
+@keyframes clip-animation {
+  from {
+    clip-path: circle(0 at var(--v3-theme-x) var(--v3-theme-y));
+  }
+  to {
+    clip-path: circle(var(--v3-theme-r) at var(--v3-theme-x) var(--v3-theme-y));
+  }
+}