diff --git a/css-view-transitions-1/Overview.bs b/css-view-transitions-1/Overview.bs
index d8574032dff..c9cc6aa07a6 100644
--- a/css-view-transitions-1/Overview.bs
+++ b/css-view-transitions-1/Overview.bs
@@ -123,14 +123,13 @@ Note that because these APIs are an enhancement to the DOM change, some principl
href="https://wicg.github.io/navigation-api/#navigate-event-class">`signal`
on `NavigateEvent` is an example of a feature developers could use to
handle this.
-* Although the transition API allows DOM changes to be asynchronous via the
- {{ViewTransitionInit/updateDOM}} callback, the transition API is not
- responsible for queuing or otherwise scheduling the DOM changes, beyond the
- scheduling needed for the transition itself. Some asynchronous DOM changes
- can happen concurrently (e.g if they're happening within independent
- components), whereas others need to queue, or abort an earlier change. This
- is best left to a feature or framework that has a more holistic view of the
- update.
+* Although the transition API allows DOM changes to be asynchronous via the [=callback=], the transition
+ API is not responsible for queuing or otherwise scheduling the DOM changes,
+ beyond the scheduling needed for the transition itself. Some asynchronous
+ DOM changes can happen concurrently (e.g if they're happening within
+ independent components), whereas others need to queue, or abort an earlier
+ change. This is best left to a feature or framework that has a more
+ holistic view of the update.
# CSS properties # {#css-properties}
@@ -449,26 +448,27 @@ A {{Document}} additionally has:
-### {{Document/createTransition()}} ### {#ViewTransition-prepare}
+
+ : callback
+ :: An asynchronous callback used to change the old DOM state into new DOM state.
+
+
+### {{Document/startViewTransition()}} ### {#ViewTransition-prepare}
The [=method steps=] for
-
createTransition(|init|)
+
startViewTransition([=callback=])
are as follows:
1. Let |transition| be a new {{ViewTransition}} object in [=this's=] [=relevant Realm=].
- 1. Set |transition|'s [=ViewTransition/DOM update callback=] to |init|[{{ViewTransitionInit/updateDOM}}].
+ 1. Set |transition|'s [=ViewTransition/DOM update callback=] to [=callback=].
1. Let |document| be [=this's=] [=relevant global object's=] [=associated document=].
@@ -496,10 +496,8 @@ callback UpdateDOMCallback = Promise
();
and a single line of script to start it:
- document.createTransition({
- updateDOM() {
- coolFramework.changeTheDOMToPageB();
- }
+ document.startViewTransition(async () => {
+ coolFramework.changeTheDOMToPageB();
});
@@ -513,22 +511,20 @@ callback UpdateDOMCallback = Promise ();
// the transitioning pseudo-element.
document.querySelector('.old-message').style.pageTransitionTag = 'message';
- const transition = document.createTransition({
- async updateDOM() {
- // This callback is invoked by the browser when "outgoing"
- // capture finishes and the DOM can be switched to the new
- // state. No frames are rendered until this callback returns.
-
- // DOM changes may be asynchronous
- await coolFramework.changeTheDOMToPageB();
-
- // Tagging elements during the updateDOM() callback marks them as
- // "incoming", to be matched up with the same-tagged "outgoing"
- // elements marked previously and transitioned between.
- document.querySelector('.new-message').style.pageTransitionTag =
- 'message';
- },
- });
+ const transition = document.startViewTransition(async () => {
+ // This callback is invoked by the browser when "outgoing"
+ // capture finishes and the DOM can be switched to the new
+ // state. No frames are rendered until this callback returns.
+
+ // DOM changes may be asynchronous
+ await coolFramework.changeTheDOMToPageB();
+
+ // Tagging elements during the callback marks them as
+ // "incoming", to be matched up with the same-tagged "outgoing"
+ // elements marked previously and transitioned between.
+ document.querySelector('.new-message').style.pageTransitionTag =
+ 'message';
+ });
// When ready resolves, all pseudo-elements for this transition have
// been generated.
@@ -759,7 +755,7 @@ The {{ViewTransition/domUpdated}} [=getter steps=] are to return [=this's=] [=Vi
1. [=Skip the page transition=] |transition| with a "{{TimeoutError}}" {{DOMException}}.
- * If the promise was fulfilled, then:
+ * If the promise was resolved, then:
1. If |transition|'s [=ViewTransition/phase=] is "`done`", then return.
@@ -1121,13 +1117,17 @@ The {{ViewTransition/domUpdated}} [=getter steps=] are to return [=this's=] [=Vi
1. [=Assert=]: |transition|'s [=ViewTransition/phase=] is [=phases/before=] "`dom-update-callback-called`".
- 1. Let |callbackPromise| be the result of [=/invoking=] |transition|'s [=ViewTransition/DOM update callback=].
+ 1. Let |callbackPromise| be [=a new promise=] in |transition|'s [=relevant Realm=].
+
+ * If |transition|'s [=ViewTransition/DOM update callback=] is null, then resolve |callbackPromise|.
+
+ * Otherwise, let |callbackPromise| be the result of [=/invoking=] |transition|'s [=ViewTransition/DOM update callback=].
1. Set |transition|'s [=ViewTransition/phase=] to "`dom-update-callback-called`".
1. [=promise/React=] to |callbackPromise|:
- * If |callbackPromise| was fulfilled, then [=resolve=] |transition|'s [=ViewTransition/DOM updated promise=].
+ * If |callbackPromise| was resolved, then [=resolve=] |transition|'s [=ViewTransition/DOM updated promise=].
* If |callbackPromise| was rejected with reason |r|, then [=reject=] |transition|'s [=ViewTransition/DOM updated promise=] with |r|.