Allow fallback animations on html element #8258
Conversation
🦋 Changeset detectedLatest commit: 00dd8ee The changes in this PR will be included in the next version bump. Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
github-actions
bot
added
the
pkg: astro
| // Trigger the animations | ||
| document.documentElement.dataset.astroTransitionFallback = 'old'; | ||
| const finished = Promise.all(document.getAnimations().map(a => a.finished)); |
There was a problem hiding this comment.
Nice! This is the API I was talking about. Support matrix looks good to me.
| sheet.addAnimationRaw('old', 'animation: none; opacity: 0; mix-blend-mode: normal;'); | ||
| sheet.addAnimationRaw('old', 'animation: none; mix-blend-mode: normal;'); |
There was a problem hiding this comment.
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.
There was a problem hiding this comment.
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.
There was a problem hiding this comment.
Changeed it with this: 00dd8ee
Changes
htmlelement by fixing the selector so it targets both children and the root itself.animationstartdid not fire before the setTimeout.finishedevent.opacity: 0for thenoneanimation as that causes the element to be invisible.Testing
Safari.mp4
Docs
N/A