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

2026-09-04 17:22:00 +08:00
parent 93e8fdf045
commit 0004bffd8b
2 changed files with 14 additions and 3 deletions
@@ -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(() => {
@@ -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);