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

Allow fallback animations on html element (#8258)

Browse source 
* Allow fallback animations on html element

* Add fallback attr after swap

* Break apart addModern and addFallback into separate functions
This commit is contained in:
Matthew Phillips 2023-08-28 14:41:00 -04:00 committed by GitHub
parent 0a97524e38
commit 1db4e92c12
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 25 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.changeset/strong-needles-accept.md Normal file
View file

@ -0,0 +1,5 @@
---
'astro': patch
---
Allow fallback animations on html element

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

@ -220,23 +220,15 @@ const { fallback = 'animate' } = Astro.props as Props;
links.length && (await Promise.all(links));
if (fallback === 'animate') {
let isAnimating = false;
addEventListener('animationstart', () => (isAnimating = true), { once: true });
// Trigger the animations
document.documentElement.dataset.astroTransitionFallback = 'old';
const finished = Promise.all(document.getAnimations().map(a => a.finished));
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 finished;
fallbackSwap();
} else {
swap();
}

21
packages/astro/src/runtime/server/transition.ts
View file

@ -52,7 +52,8 @@ export function renderTransition(
}
}
} else if (animationName === 'none') {
sheet.addAnimationRaw('old', 'animation: none; opacity: 0; mix-blend-mode: normal;');
sheet.addFallback('old', 'animation: none; mix-blend-mode: normal;');
sheet.addModern('old', 'animation: none; opacity: 0; mix-blend-mode: normal;');
sheet.addAnimationRaw('new', 'animation: none; mix-blend-mode: normal;');
}
@ -88,11 +89,22 @@ class ViewTransitionStyleSheet {
}
addAnimationRaw(image: 'old' | 'new' | 'group', animation: string) {
const { scope, name } = this;
this.addModern(image, animation);
this.addFallback(image, animation);
}
addModern(image: 'old' | 'new' | 'group', animation: string) {
const { name } = this;
this.addRule('modern', `::view-transition-${image}(${name}) { ${animation} }`);
}
addFallback(image: 'old' | 'new' | 'group', animation: string) {
const { scope } = this;
this.addRule(
'fallback',
`[data-astro-transition-fallback="${image}"] [data-astro-transition-scope="${scope}"] { ${animation} }`
// Two selectors here, the second in case there is an animation on the root.
`[data-astro-transition-fallback="${image}"] [data-astro-transition-scope="${scope}"],
[data-astro-transition-fallback="${image}"][data-astro-transition-scope="${scope}"] { ${animation} }`
);
}
@ -107,7 +119,8 @@ class ViewTransitionStyleSheet {
this.addRule('modern', `${prefix}::view-transition-${image}(${name}) { ${animation} }`);
this.addRule(
'fallback',
`${prefix}[data-astro-transition-fallback="${image}"] [data-astro-transition-scope="${scope}"] { ${animation} }`
`${prefix}[data-astro-transition-fallback="${image}"] [data-astro-transition-scope="${scope}"],
${prefix}[data-astro-transition-fallback="${image}"][data-astro-transition-scope="${scope}"] { ${animation} }`
);
}
}