diff --git a/themes/ITStudioMainSite/assets/js/theme-toggle.js b/themes/ITStudioMainSite/assets/js/theme-toggle.js index 2400328..76c67c9 100644 --- a/themes/ITStudioMainSite/assets/js/theme-toggle.js +++ b/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(() => { diff --git a/themes/ITStudioMainSite/functions.php b/themes/ITStudioMainSite/functions.php index cddde79..067b413 100644 --- a/themes/ITStudioMainSite/functions.php +++ b/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);