Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Allow fallback animations on html element #8258

Merged
merged 3 commits into from
Aug 28, 2023
Merged

Allow fallback animations on html element #8258

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
2549c15
Allow fallback animations on html element
matthewp Aug 28, 2023
84642f0
Add fallback attr after swap
matthewp Aug 28, 2023
00dd8ee
Break apart addModern and addFallback into separate functions
matthewp Aug 28, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/strong-needles-accept.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'astro': patch
---

Allow fallback animations on html element
14 changes: 3 additions & 11 deletions packages/astro/components/ViewTransitions.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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));
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice! This is the API I was talking about. Support matrix looks good to me.

getAnimations support matrix

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();
}
Expand Down
9 changes: 6 additions & 3 deletions packages/astro/src/runtime/server/transition.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,7 @@ export function renderTransition(
}
}
} else if (animationName === 'none') {
sheet.addAnimationRaw('old', 'animation: none; opacity: 0; mix-blend-mode: normal;');
sheet.addAnimationRaw('old', 'animation: none; mix-blend-mode: normal;');
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hmm, I might be wrong but I from my testing the opacity: 0 was needed because of stacking when using view transitions (not the fallback). This should be handled by mix-blend-mode: normal though.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah i wanted to get your opinion on this. I thought it was for that reason. Isn't the reason to do this so you can see the new element which is behind it? But for none is that necessary as both elements are the same?

I removed this because it makes it so that in fallback mode the element is invisible until both animations are complete. We might need a mechanism for VT only styles.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Changeed it with this: 00dd8ee

sheet.addAnimationRaw('new', 'animation: none; mix-blend-mode: normal;');
}

Expand Down Expand Up @@ -92,7 +92,9 @@ class ViewTransitionStyleSheet {
this.addRule('modern', `::view-transition-${image}(${name}) { ${animation} }`);
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} }`
);
}

Expand All @@ -107,7 +109,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} }`
);
}
}
Expand Down