Make viewTransition.finished wait for animations triggered by viewTra…

…nsition.ready (#10787)
withastro · Apr 15, 2024 · 699f455 · 699f455
1 parent 1607fac
commit 699f455
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(