[css-view-transitions-2] Allow rAF/script based animations with view transitions.

[khushalsagar]

View Transitions keep the pseudo DOM state alive until there is an active animation on any of the generated pseudo-elements. This is fine if the author is using CSS or Web Animations, but not if the animation is driven by script using rAF or setTimeout.

We can add an API as follows which allows the author to pass a promise indicating when a custom script driven animation has finished.

function animateHeader(transition) {
  transition.waitUntil((async () => {
    // animate the header here, and return when done
  })());
}

async function startAnimations(transition) {
  await transition.ready;
  animateHeader(transition);
  animateFooter(transition);
  animateThumbnail(transition);
}

credits to @jakearchibald for the API suggestion.

[nt1m]

I'm not sure what the use case is here? The view transition pseudo elements can only be animated via CSS, if you do animations anywhere else in the document it won't be visible because it's all happening underneath the view transition layer?

The only potential use case I'm seeing is if you're trying to fetch contents from a server and only want to finish the animation when that's done, but that can also be done by adjusting the animation-iteration-count/duration/delay of the view-transition pseudo element dynamically.

[khushalsagar]

I'm not sure what the use case is here?

You could integrate any custom framework for animation curves (like a spring) and animate the pseudo-elements using rAF. It's cumbersome because pseudo-elements don't have a concept of inline style but doable (update style rule via CSSOM).

An author would have to set up a dummy animation to keep the pseudo-DOM alive for this use-case.

[nt1m]

If we really wanted to do this, I think a endTransition() method would probably be the best way IMO.

[khushalsagar]

The pro of a promise based API like this is that if there's multiple components driving different animations, each can add their own promise. With an endTransition() like API the author would have to manually implement that pattern to gate the endTransition() call.