diff --git a/.changeset/stupid-countries-warn.md b/.changeset/stupid-countries-warn.md new file mode 100644 index 000000000000..27eeea281d4c --- /dev/null +++ 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 index 0084a9d74ea2..e65b613c93e1 100644 --- 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((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(