[css-view-transitions-2] MPA: Interacting with transition states

[jakearchibald]

With SPA transitions:

const transition = document.startViewTransition(callback);

transition.updateCallbackDone.then(() => …);
transition.ready.then(() => …);
transition.finished.then(() => …);
transition.skipTransition();

ready is at the start of the transition. The pseudos exist at this point, so you can animate them with JavaScript.

finished is when the final state is visible and the pseudos are gone.

We want something similar for MPA transitions, except for updateCallbackDone which doesn't make sense for MPA, as the browser handles the update, and script can't span the update (the new page is a new scripting context).

Some options:

document.addEventListener('crossdocviewtransition', (event) => {
  event.ready.then(() => …);
  event.finished.then(() => …);
  event.skipTransition();
});

Or:

document.addEventListener('crossdocviewtransition', (event) => {
  event.transition.ready.then(() => …);
  event.transition.finished.then(() => …);
  event.transition.skipTransition();
});

The latter might be preferable, because it means a helper function can do things with a transition instance, and in most cases it won't matter if it's an MPA or SPA transition.

We could have a ViewTransition class that omits updateCallbackDone, and document.startViewTransition would return a SameDocumentViewTransition that inherits from ViewTransition and adds updateCallbackDone. Or, an MPA ViewTransition instance could just have a updateCallbackDone promise that's already fulfilled.

[noamr]

Closing this, this is handled in the spec draft. updateCallbackDone is a resolved promise. Please feel free to reopen/open a new issue if this is still an issue!