Infrastructure/astro
0
Fork 0
mirror of https://github.com/withastro/astro.git synced 2024-12-16 21:46:22 -05:00
Code Issues Activity

Fix race condition when performing swap for fallback

Browse source
This commit is contained in:
Matthew Phillips 2023-08-03 19:57:12 -04:00
parent 8226002c0a
commit e5f7d11ef5
1 changed files with 8 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
packages/astro/components/ViewTransitions.astro
View file

@ -168,13 +168,18 @@ const { fallback = 'animate' } = Astro.props as Props;
// Trigger the animations // Trigger the animations
document.documentElement.dataset.astroTransitionFallback = 'old'; document.documentElement.dataset.astroTransitionFallback = 'old';
doc.documentElement.dataset.astroTransitionFallback = 'new'; const fallbackSwap = () => {
removeEventListener('animationend', fallbackSwap);
clearTimeout(timeout);
swap();
document.documentElement.dataset.astroTransitionFallback = 'new';
};
// If there are any animations, want for the animationend event. // If there are any animations, want for the animationend event.
addEventListener('animationend', swap, { once: true }); addEventListener('animationend', fallbackSwap, { once: true });
// If there are no animations, go ahead and swap on next tick // If there are no animations, go ahead and swap on next tick
// This is necessary because we do not know if there are animations. // This is necessary because we do not know if there are animations.
// The setTimeout is a fallback in case there are none. // The setTimeout is a fallback in case there are none.
setTimeout(() => !isAnimating && swap()); var timeout = setTimeout(() => !isAnimating && fallbackSwap());
} else { } else {
swap(); swap();
} }