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

3 months ago · 713281a8ba
parent 42e3de9e2c
commit 713281a8ba
1 changed files with 4 additions and 1 deletions
--- a/packages/effects/layouts/src/widgets/theme-toggle/theme-button.vue
+++ b/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(${endRadius}px at ${x}px ${y}px)`,
    ];
-    document.documentElement.animate(
+    const animate = document.documentElement.animate(
      {
        clipPath: isDark.value ? [...clipPath].reverse() : clipPath,
      },
@ -76,6 +76,9 @@ function toggleTheme(event: MouseEvent) {
          : '::view-transition-new(root)',
      },
    );
+    animate.onfinish = () => {
+      transition.skipTransition();
+    };
  });
 }
 </script>