revert handling of JavaScript animations during view transitions

[martrapp]

Changes

This is edge-case-land of Astro's view transition simulation when you do not use CSS only but also want to combine it with JavaScript animations.

While #10787 worked fine for Firefox on desktops, it introduced a regression on mobile WebKit browsers.

Video.mp4

The blinking screen in the middle of the animation is a result of un-animated rendering before the animation kicks in. Reverting #10787 fixes this.

As an afterthought, it would have been better to switch micro tasks instead of yielding to the tasks queue. But after consulting the spec again (https://drafts.csswg.org/css-view-transitions-1/), I'm not sure whether this goes into the right direction. In browsers with native view transition support
viewTransition.finished would not wait for arbitrary animations triggered by viewTransition.ready.

It would only include animations that depend on the view transition pseudo elements. Translated to Astro that would mean only animations that depend on data-astro-transition* attributes. This thinking leads to a straight forward solution for JavaScript animations:
If you want to delay finished in Astro's view transition simulation for a JavaScript animation triggered by ready, add a noop animation that is triggered by data-astro-transition-fallback="new". This will automatically be covered by fallback="animate".

<style is:global>
    /* Example: For Astro's view transition simulation, 
       ensure that `viewTransition.finished` happens 
       at least 1.5s after `viewTransition.ready` */ 
    @keyframes noop {}
    :root[data-astro-transition-fallback="new"] {animation: noop 0s 1.5s}
</style>

Testing

No automated tests as this only shows on browsers which we do not include in our e2e tests.

After removing the round trip through the task queue, the transition looks smooth again. The noop CSS animation shown above was used to fix the original issue faced in #10787

Video2.mp4

Docs

n.a. / Bug fix

[changeset-bot]

🦋 Changeset detected

Latest commit: 37c458d

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