Make viewTransition.finished wait for animations triggered by viewTra…

…nsition.ready
withastro · Apr 13, 2024 · 9675710 · 9675710
1 parent 174ce25
commit 9675710
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 1 deletion.
diff --git a/.changeset/stupid-countries-warn.md b/.changeset/stupid-countries-warn.md
@@ -0,0 +1,5 @@
+---
+"astro": patch
+---
+
+Fixes a timing issue in the view transition simulation.
diff --git a/packages/astro/src/transitions/router.ts b/packages/astro/src/transitions/router.ts
@@ -396,8 +396,10 @@ async function updateDOM(
 			const style = window.getComputedStyle(effect.target, effect.pseudoElement);
 			return style.animationIterationCount === 'infinite';
 		}
-		// Trigger the animations
 		const currentAnimations = document.getAnimations();
+		// allow animations triggered by viewTransition.ready to start
+		await new Promise<void>((r)=>setTimeout(r));
+		// Trigger view transition animations waiting for data-astro-transition-fallback
 		document.documentElement.setAttribute(OLD_NEW_ATTR, phase);
 		const nextAnimations = document.getAnimations();
 		const newAnimations = nextAnimations.filter(