From 3c2e120e34b1760a19b988dcdab718a0fb423298 Mon Sep 17 00:00:00 2001
From: zclzone <zclzone@outlook.com>
Date: Tue, 25 Jun 2024 18:17:17 +0800
Subject: [PATCH] =?UTF-8?q?style:=20=E4=BC=98=E5=8C=96=E4=B8=BB=E9=A2=98?=
 =?UTF-8?q?=E5=88=87=E6=8D=A2=E8=BF=87=E6=B8=A1=E5=8A=A8=E7=94=BB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/ToggleTheme.vue | 54 ++++++++++++++++++++-------
 src/styles/global.scss                | 19 ++++------
 2 files changed, 49 insertions(+), 24 deletions(-)

diff --git a/src/components/common/ToggleTheme.vue b/src/components/common/ToggleTheme.vue
index 6ed6611..87ead20 100644
--- a/src/components/common/ToggleTheme.vue
+++ b/src/components/common/ToggleTheme.vue
@@ -12,23 +12,51 @@ import { useAppStore } from '@/store'
 
 const appStore = useAppStore()
 const isDark = useDark()
-function toggleDark({ clientX, clientY }) {
-  const maxRadius = Math.hypot(
-    Math.max(clientX, window.innerWidth - clientX),
-    Math.max(clientY, window.innerHeight - clientY),
-  )
-  const style = document.documentElement.style
-  style.setProperty('--circle-x', `${clientX}px`)
-  style.setProperty('--circle-y', `${clientY}px`)
-  style.setProperty('--circle-r', `${maxRadius}px`)
-
+async function toggleDark({ clientX, clientY }) {
   function handler() {
     appStore.toggleDark()
     useToggle(isDark)()
   }
 
-  document.startViewTransition
-    ? document.startViewTransition(handler)
-    : handler()
+  if (!document.startViewTransition) {
+    return handler()
+  }
+
+  const clipPath = [
+    `circle(0px at ${clientX}px ${clientY}px)`,
+    `circle(${Math.hypot(
+      Math.max(clientX, window.innerWidth - clientX),
+      Math.max(clientY, window.innerHeight - clientY),
+    )}px at ${clientX}px ${clientY}px)`,
+  ]
+
+  await document.startViewTransition(handler).ready
+
+  document.documentElement.animate(
+    { clipPath: isDark.value ? clipPath.reverse() : clipPath },
+    {
+      duration: 500,
+      easing: 'ease-in',
+      pseudoElement: `::view-transition-${isDark.value ? 'old' : 'new'}(root)`,
+    },
+  )
+
+  // const maxRadius = Math.hypot(
+  //   Math.max(clientX, window.innerWidth - clientX),
+  //   Math.max(clientY, window.innerHeight - clientY),
+  // )
+  // const style = document.documentElement.style
+  // style.setProperty('--circle-x', `${clientX}px`)
+  // style.setProperty('--circle-y', `${clientY}px`)
+  // style.setProperty('--circle-r', `${maxRadius}px`)
+
+  // function handler() {
+  //   appStore.toggleDark()
+  //   useToggle(isDark)()
+  // }
+
+  // document.startViewTransition
+  //   ? document.startViewTransition(handler)
+  //   : handler()
 }
 </script>
diff --git a/src/styles/global.scss b/src/styles/global.scss
index 18b6798..857043c 100644
--- a/src/styles/global.scss
+++ b/src/styles/global.scss
@@ -74,21 +74,18 @@ body {
 }
 
 /* 切换主题的动画效果 */
-::view-transition-old(root) {
+::view-transition-old(root),
+::view-transition-new(root) {
   animation: none;
   mix-blend-mode: normal;
 }
 
-::view-transition-new(root) {
-  animation: 0.5s ease-in circle-animation;
-  mix-blend-mode: normal;
+::view-transition-old(root),
+.dark::view-transition-new(root) {
+  z-index: 1;
 }
 
-@keyframes circle-animation {
-  from {
-    clip-path: circle(0 at var(--circle-x) var(--circle-y));
-  }
-  to {
-    clip-path: circle(var(--circle-r) at var(--circle-x) var(--circle-y));
-  }
+::view-transition-new(root),
+.dark::view-transition-old(root) {
+  z-index: 9999;
 }