fix: 修复切换白天/黑夜主题时动画播放问题

themes/ITStudioMainSite/assets/js/theme-toggle.js

@@ -19,6 +19,14 @@ function ensureViewTransitionStyles() {
       mix-blend-mode: normal;
     }
 
+    ::view-transition-old(root) {
+      z-index: 0;
+    }
+
+    ::view-transition-new(root) {
+      z-index: 1;
+    }
+
     ::view-transition-group(root) {
       animation: none;
     }
@@ -86,7 +94,7 @@ function getTransitionOrigin(event, toggle) {
 function getRevealRadius(x, y) {
   const maxX = Math.max(x, window.innerWidth - x);
   const maxY = Math.max(y, window.innerHeight - y);
-  return Math.hypot(maxX, maxY);
+  return Math.hypot(maxX, maxY) * 1.05 + 2;
 }
 
 function switchThemeWithScatter(theme, origin) {
@@ -108,16 +116,19 @@ function switchThemeWithScatter(theme, origin) {
 
   transition.ready
     .then(() => {
-      document.documentElement.animate(
+      const revealAnimation = document.documentElement.animate(
         {
           clipPath: [clipFrom, clipTo],
         },
         {
           duration: 650,
           easing: 'cubic-bezier(0.22, 1, 0.36, 1)',
+          fill: 'both',
           pseudoElement: '::view-transition-new(root)',
         }
       );
+
+      return revealAnimation.finished;
     })
     .catch(() => {})
     .finally(() => {

themes/ITStudioMainSite/functions.php

@@ -855,7 +855,7 @@ function itstudio_enqueue_scripts() {
     }
 
     // Scripts
-    wp_enqueue_script('itstudio-theme-toggle', get_template_directory_uri() . '/assets/js/theme-toggle.js', array(), '1.0.0', true);
+    wp_enqueue_script('itstudio-theme-toggle', get_template_directory_uri() . '/assets/js/theme-toggle.js', array(), '1.0.1', true);
     wp_enqueue_script('itstudio-lang-toggle', get_template_directory_uri() . '/assets/js/lang-toggle.js', array(), '1.0.0', true);
     wp_enqueue_script('itstudio-main', get_template_directory_uri() . '/assets/js/main.js', array(), '1.0.0', true);