Make viewTransition.finished wait for animations triggered by viewTransition.ready (#10787)

martrapp · web-flow · commit 699f4559a279 · 2024-04-15T16:58:40.000+08:00
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(

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +"astro": patch
 +---
++
 +Fixes a timing issue in the view transition simulation.