[csswg-drafts] [css-view-transitions-2] Script event on new Document for cross-document ViewTransitions (#8805)

khushalsagar has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-view-transitions-2] Script event on new Document for cross-document ViewTransitions ==
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](https://drafts.csswg.org/css-view-transitions-1/#the-domtransition-interface) 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:

```js
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(() => { ... });
});
```

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/8805 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Friday, 5 May 2023 22:58:41 UTC