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

Prevent View Transition fallback from waiting on looping animations (#8331)

Browse source 
* Prevent View Transition fallback from waiting on looping animations

* Filter out infinite animations
This commit is contained in:
Matthew Phillips 2023-08-31 13:32:45 -04:00 committed by GitHub
parent af41b03d05
commit 7a894eec3e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 19 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.changeset/late-foxes-juggle.md Normal file
View file

@ -0,0 +1,5 @@
---
'astro': patch
---
Prevent View Transition fallback from waiting on looping animations

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

@ -98,6 +98,17 @@ const { fallback = 'animate' } = Astro.props as Props;
return wait; return wait;
} }
function isInfinite(animation: Animation) {
const effect = animation.effect;
if(
!effect ||
!(effect instanceof KeyframeEffect) ||
!effect.target
) return false;
const style = window.getComputedStyle(effect.target, effect.pseudoElement);
return style.animationIterationCount === "infinite";
}
const parser = new DOMParser(); const parser = new DOMParser();
async function updateDOM(html: string, state?: State, fallback?: Fallback) { async function updateDOM(html: string, state?: State, fallback?: Fallback) {
@ -221,8 +232,10 @@ const { fallback = 'animate' } = Astro.props as Props;
if (fallback === 'animate') { if (fallback === 'animate') {
// Trigger the animations // Trigger the animations
const currentAnimations = document.getAnimations();
document.documentElement.dataset.astroTransitionFallback = 'old'; document.documentElement.dataset.astroTransitionFallback = 'old';
const finished = Promise.all(document.getAnimations().map(a => a.finished)); const newAnimations = document.getAnimations().filter(a => !currentAnimations.includes(a) && !isInfinite(a));
const finished = Promise.all(newAnimations.map(a => a.finished));
const fallbackSwap = () => { const fallbackSwap = () => {
swap(); swap();
document.documentElement.dataset.astroTransitionFallback = 'new'; document.documentElement.dataset.astroTransitionFallback = 'new';