feat(store): add darkmode animal

src/components/common/DarkModeSwitch.vue

@@ -7,7 +7,7 @@ const appStore = useAppStore()
 <template>
   <div
     class="cursor-pointer"
-    @click="appStore.toggleDarkMode()"
+    @click="appStore.toggleDarkMode"
   >
     <i-icon-park-outline-moon v-if="appStore.darkMode" />
     <i-icon-park-outline-sun v-else />

src/layouts/components/header/Setting.vue

@@ -30,7 +30,7 @@ function openSetting() {
                   深色模式
                   <n-switch
                     :value="appStore.darkMode"
-                    @update:value="appStore.toggleDarkMode()"
+                    @update:value="appStore.toggleDarkMode"
                   />
                 </n-space>
                 <n-space justify="space-between">

src/store/modules/app.ts

@@ -53,14 +53,55 @@ export const useAppStore = defineStore('app-store', {
       await toggle()
     },
     /* 切换主题 亮/深色 */
-    toggleDarkMode(mode?: boolean) {
+    toggleDarkMode(event: MouseEvent, mode?: boolean) {
-      if (typeof mode === 'boolean')
+      if (typeof mode === 'boolean') {
         isDark.value = mode
+        this.darkMode = isDark.value
+      }
+      else {
+        // @ts-expect-error experimental API
+        const isAppearanceTransition = document.startViewTransition
+    && !window.matchMedia('(prefers-reduced-motion: reduce)').matches
 
-      else
+        if (!isAppearanceTransition) {
-        isDark.value = !isDark.value
+          isDark.value = !isDark.value
+          return
+        }
 
-      this.darkMode = isDark.value
+        const x = event.clientX
+        const y = event.clientY
+        const endRadius = Math.hypot(
+          Math.max(x, innerWidth - x),
+          Math.max(y, innerHeight - y),
+        )
+        // @ts-expect-error: Transition API
+        const transition = document.startViewTransition(async () => {
+          isDark.value = !isDark.value
+          this.darkMode = isDark.value
+          await nextTick()
+        })
+        transition.ready
+          .then(() => {
+            const clipPath = [
+        `circle(0px at ${x}px ${y}px)`,
+        `circle(${endRadius}px at ${x}px ${y}px)`,
+            ]
+            document.documentElement.animate(
+              {
+                clipPath: isDark.value
+                  ? [...clipPath].reverse()
+                  : clipPath,
+              },
+              {
+                duration: 400,
+                easing: 'ease-out',
+                pseudoElement: isDark.value
+                  ? '::view-transition-old(root)'
+                  : '::view-transition-new(root)',
+              },
+            )
+          })
+      }
     },
     /**
      * @description: 页面内容重载

src/styles/css/index.css

@@ -12,4 +12,21 @@ body,
 
 .gray-mode {
   filter: grayscale(100%);
+}
+::view-transition-old(root),
+::view-transition-new(root) {
+  animation: none;
+  mix-blend-mode: normal;
+}
+::view-transition-old(root) {
+  z-index: 1;
+}
+::view-transition-new(root) {
+  z-index: 9999;
+}
+.dark::view-transition-old(root) {
+  z-index: 9999;
+}
+.dark::view-transition-new(root) {
+  z-index: 1;
 }