[csswg-drafts] [css-view-transitions-2] Property on `ViewTransition` that notifies when the transition has begun (#9314)

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

== [css-view-transitions-2] Property on `ViewTransition` that notifies when the transition has begun ==
The existing promises on the `ViewTransition` interface (`ready`, `finished`, `updateCallbackDone`) all resolve at some time after the callback passed to `startViewTransition` executes. It would be useful to have a `Promise` that resolves right before the callback executes. 

The Svelte blog shows an example of where this would be useful: https://svelte.dev/blog/view-transitions#getting-started-with-view-transitions.

```
  return new Promise((resolve) => {
        document.startViewTransition(async () => {
            resolve();
            await navigation.complete;
        });
    });
```

In order to use view transitions with the router, the navigation has to pause and wait for the browser to begin processing the view transition callback. Then the navigation resumes, which includes the DOM update. Finally, the router indicates back to the browser that the navigation (and DOM update) completed by resolving the `navigation.complete` `Promise`. This back-and-forth communication with the `Promise` at the start of the transition might be a common use-case for developers and frameworks to avoid a large chunk of code inside a closure for the `startViewTransition` callback.

If this property existed, the above code might instead look like this:

```
const transition = document.startViewTransition(navigation.complete);
return transition.beforeUpdateCallback; // or some other name for a promise that resolves right before the update callback happens
```

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


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

Received on Tuesday, 5 September 2023 20:37:34 UTC