修复明暗主题切换动画闪烁

Author: hooray

src/layouts/components/Topbar/Toolbar/ColorScheme/index.vue

@@ -10,28 +10,35 @@ function toggleColorScheme(event: MouseEvent) {
     settingsStore.currentColorScheme && settingsStore.setColorScheme(settingsStore.currentColorScheme === 'dark' ? 'light' : 'dark')
     return
   }
-  const x = event.clientX
-  const y = event.clientY
+  const target = event.target as HTMLElement
+  const { left, top, width, height } = target.getBoundingClientRect()
+  const x = left + width / 2
+  const y = top + height / 2
   const endRadius = Math.hypot(
     Math.max(x, innerWidth - x),
     Math.max(y, innerHeight - y),
   )
+  const ratioX = (100 * x) / innerWidth
+  const ratioY = (100 * y) / innerHeight
+  const referR = Math.hypot(innerWidth, innerHeight) / Math.SQRT2
+  const ratioR = (100 * endRadius) / referR
   const transition = document.startViewTransition(async () => {
     settingsStore.currentColorScheme && settingsStore.setColorScheme(settingsStore.currentColorScheme === 'dark' ? 'light' : 'dark')
     await nextTick()
   })
   transition.ready.then(() => {
     const clipPath = [
-      `circle(0px at ${x}px ${y}px)`,
-      `circle(${endRadius}px at ${x}px ${y}px)`,
+      `circle(0% at ${ratioX}% ${ratioY}%)`,
+      `circle(${ratioR}% at ${ratioX}% ${ratioY}%)`,
     ]
     document.documentElement.animate(
       {
-        clipPath: settingsStore.currentColorScheme === 'light' ? clipPath : clipPath.reverse(),
+        clipPath: settingsStore.currentColorScheme === 'light' ? clipPath : [...clipPath].reverse(),
       },
       {
         duration: 500,
         easing: 'ease-in-out',
+        fill: 'both',
         pseudoElement: settingsStore.currentColorScheme === 'light' ? '::view-transition-new(root)' : '::view-transition-old(root)',
       },
     )