[css-view-transitions-2] Script event on new Docume 8000 nt for cross-document ViewTransitions #8805
Description
View Transition API needs to provide an event on the new Document to enable customization of the transition based on the URL for the old Document and its state when the transition was initiated. For example, the old Document could have changed from user interaction or the transition could depend on which click initiated the navigation.
The proposed IDL is as follows:
[Exposed=Window]
interface ViewTransitionBeforeAnimationEvent : Event {
// The URL being navigated from,.
readonly attribute USVString url;
// Opaque contextual information passed from the old Document.
// This must be a serializable object : https://developer.mozilla.org/en-US/docs/Glossary/Serializable_object.
attribute any context;
// The transition object associated with this navigation.
ViewTransitionOnNavigation transition;
};
The ViewTransition interface is also split into a base IDL with functionality common to same-document and cross-document transitions.
[Exposed=Window]
interface ViewTransitionBase {
readonly attribute Promise ready;
readonly attribute Promise finished;
undefined skipTransition();
};
[Exposed=Window]
interface ViewTransition : ViewTransitionBase {
readonly attribute Promise updateCallbackDone;
};
[Exposed=Window]
interface ViewTransitionOnNavigation : ViewTransitionBase {
};
The following is sample code using this event:
document.addEventListener("viewtransitionbeforeanimation", (event) => {
// Cancel the transition (based on old URL) if needed.
if (shouldNotTransition(event.url)) {
event.preventDefault();
return;
}
const transition = event.transition;
const info = event.info;
// Add render-blocking resources to delay the first paint and transition
// start. This can be customized based on the old Document state when the
// transition was initiated.
markRenderBlockingResources(info);
// The `ready` promise resolves when the pseudo-elements have been generated
// and can be used to customize animations via script.
transition.ready.then(() => {
document.documentElement.animate(...,
{
// Specify which pseudo-element to animate
pseudoElement: "::view-transition-new(root)",
}
);
// Remove viewTransitionNames tied to this transition.
thumbnail.style.viewTransitionName = "none";
});
// The `finished` promise resolves when all animations for the transition are
// finished or cancelled and the pseudo-elements have been removed.
transition.finished.then(() => { ... });
});