michael/astro
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Merge branch 'v2-view-transitions' of github.com:leomp12/astro-1 into v2-view-transitions

Browse source
This commit is contained in:
Leonardo Matos 2023-10-05 14:42:59 -03:00
commit 6c52972ff2
1 changed files with 16 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -122,7 +122,7 @@ const { fallback = 'animate' } = Astro.props as Props;
// Inline
(s1.textContent && s1.textContent === s2.textContent) ||
// External
(s1.type === s2.type && s1.src === s2.src)
(s1.type === s2.type && s1.src && s1.src === s2.src)
) {
return s2;
}
@ -225,18 +225,21 @@ const { fallback = 'animate' } = Astro.props as Props;
// Trigger the animations
document.documentElement.dataset.astroTransitionFallback = 'old';
const fallbackSwap = () => {
removeEventListener('animationend', fallbackSwap);
clearTimeout(timeout);
swap();
document.documentElement.dataset.astroTransitionFallback = 'new';
};
// If there are any animations, want for the animationend event.
addEventListener('animationend', fallbackSwap, { once: true });
// If there are no animations, go ahead and swap on next tick
// This is necessary because we do not know if there are animations.
// The setTimeout is a fallback in case there are none.
let timeout = setTimeout(() => !isAnimating && fallbackSwap());
await new Promise((resolve) => {
const fallbackSwap = () => {
removeEventListener('animationend', fallbackSwap);
clearTimeout(timeout);
swap();
resolve(true);
document.documentElement.dataset.astroTransitionFallback = 'new';
};
// If there are any animations, want for the animationend event.
addEventListener('animationend', fallbackSwap, { once: true });
// If there are no animations, go ahead and swap on next tick
// This is necessary because we do not know if there are animations.
// The setTimeout is a fallback in case there are none.
let timeout = setTimeout(() => !isAnimating && fallbackSwap());
});
} else {
swap();
}