From 967571076559ef05d848716414178742e9467175 Mon Sep 17 00:00:00 2001 From: Martin Trapp <94928215+martrapp@users.noreply.github.com> Date: Sat, 13 Apr 2024 16:26:35 +0200 Subject: [PATCH] Make viewTransition.finished wait for animations triggered by viewTransition.ready --- .changeset/stupid-countries-warn.md | 5 +++++ packages/astro/src/transitions/router.ts | 4 +++- 2 files changed, 8 insertions(+), 1 deletion(-) create mode 100644 .changeset/stupid-countries-warn.md 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(