From 5d06986dbc8ea7ef0485bef3f0759d1ff3766586 Mon Sep 17 00:00:00 2001
From: Coffee-crocodile <1147347984@qq.com>
Date: Wed, 21 Jun 2023 15:36:47 +0800
Subject: [PATCH] feat(store): add darkmode animal

---
 src/components/common/DarkModeSwitch.vue  |  2 +-
 src/layouts/components/header/Setting.vue |  2 +-
 src/store/modules/app.ts                  | 51 ++++++++++++++++++++---
 src/styles/css/index.css                  | 17 ++++++++
 4 files changed, 65 insertions(+), 7 deletions(-)

diff --git a/src/components/common/DarkModeSwitch.vue b/src/components/common/DarkModeSwitch.vue
index 5845f64..7ec16ca 100644
--- a/src/components/common/DarkModeSwitch.vue
+++ b/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 />
diff --git a/src/layouts/components/header/Setting.vue b/src/layouts/components/header/Setting.vue
index afd9ef7..e00ead5 100644
--- a/src/layouts/components/header/Setting.vue
+++ b/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">
diff --git a/src/store/modules/app.ts b/src/store/modules/app.ts
index 0b101d8..b68aea8 100644
--- a/src/store/modules/app.ts
+++ b/src/store/modules/app.ts
@@ -53,14 +53,55 @@ export const useAppStore = defineStore('app-store', {
       await toggle()
     },
     /* 切换主题 亮/深色 */
-    toggleDarkMode(mode?: boolean) {
-      if (typeof mode === 'boolean')
+    toggleDarkMode(event: MouseEvent, 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
-        isDark.value = !isDark.value
+        if (!isAppearanceTransition) {
+          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: 页面内容重载
diff --git a/src/styles/css/index.css b/src/styles/css/index.css
index 5c4c046..436c191 100644
--- a/src/styles/css/index.css
+++ b/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;
 }
\ No newline at end of file