ソースを参照

fix(theme-button): fix flicker during theme switch (#6782)

HaHa 8 ヶ月 前
コミット
713281a8ba

+ 4 - 1
packages/effects/layouts/src/widgets/theme-toggle/theme-button.vue

@@ -64,7 +64,7 @@ function toggleTheme(event: MouseEvent) {
       `circle(0px at ${x}px ${y}px)`,
       `circle(0px at ${x}px ${y}px)`,
       `circle(${endRadius}px at ${x}px ${y}px)`,
       `circle(${endRadius}px at ${x}px ${y}px)`,
     ];
     ];
-    document.documentElement.animate(
+    const animate = document.documentElement.animate(
       {
       {
         clipPath: isDark.value ? [...clipPath].reverse() : clipPath,
         clipPath: isDark.value ? [...clipPath].reverse() : clipPath,
       },
       },
@@ -76,6 +76,9 @@ function toggleTheme(event: MouseEvent) {
           : '::view-transition-new(root)',
           : '::view-transition-new(root)',
       },
       },
     );
     );
+    animate.onfinish = () => {
+      transition.skipTransition();
+    };
   });
   });
 }
 }
 </script>
 </script>