Skip to content

Rename shared element transition -> view transition #7851

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Oct 7, 2022
Merged

Rename shared element transition -> view transition #7851

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
114 changes: 57 additions & 57 deletions css-view-transitions-1/Overview.bs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,15 @@
<pre class='metadata'>
Title: CSS Shared Element Transitions Module Level 1
Shortname: css-shared-element-transitions
Title: CSS View Transitions Module Level 1
Shortname: css-view-transitions
Level: 1
Status: ED
Group: csswg
ED: https://drafts.csswg.org/css-shared-element-transitions-1/
ED: https://drafts.csswg.org/css-view-transitions-1/
Work Status: exploring
Editor: Tab Atkins-Bittner, Google, http://xanthir.com/contact/, w3cid 42199
Editor: Jake Archibald, Google
Editor: Khushal Sagar, Google
Abstract: This module defines the Single-Page Document-Transition API, along with associated properties and pseudo-elements.
Abstract: This module defines the View Transition API, along with associated properties and pseudo-elements.
</pre>

<pre class=link-defaults>
Expand Down Expand Up @@ -42,7 +42,7 @@ spec:css-shapes-3; type:function; text:rect()

<em>This section is non-normative.</em>

Shared element transitions is a set of API that allow DOM changes to smoothly
View Transitions is a set of API that allow DOM changes to smoothly
animate between states. This is accomplished by leveraging user-agents ability
to persist visual representations of state (i.e. snapshots) and blend them with
current DOM state's visual output. The API also allows the animations to be
Expand All @@ -68,7 +68,7 @@ with a single call to the JavaScript API.

The user-agent provides additional JavaScript functionality and promises to
control and observe the state of the animations. These are described in detail
in the {{DOMTransition}} section.
in the {{ViewTransition}} section.

After the callback has finished running, the user-agent creates a structure of
pseudo-elements that represent both the "before" and "after" states of the
Expand Down Expand Up @@ -121,7 +121,7 @@ Note that because these APIs are an enhancement to the DOM change, some principl
on `NavigateEvent`</a> is an example of a feature developers could use to
handle this.
* Although the transition API allows DOM changes to be asynchronous via the
{{DOMTransitionInit/updateDOM}} callback, the transition API is not
{{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
Expand Down Expand Up @@ -434,7 +434,7 @@ A {{Document}} additionally has:

<dl dfn-for="document">
: <dfn>active DOM transition</dfn>
:: a {{DOMTransition}} or null. Initially null.
:: a {{ViewTransition}} or null. Initially null.

: <dfn>transition suppressing rendering</dfn>
:: a boolean. Initially false.
Expand All @@ -446,33 +446,33 @@ A {{Document}} additionally has:

<script type=idl>
partial interface Document {
DOMTransition createTransition(DOMTransitionInit init);
ViewTransition createTransition(ViewTransitionInit init);
};

dictionary DOMTransitionInit {
dictionary ViewTransitionInit {
required UpdateDOMCallback updateDOM;
};

callback UpdateDOMCallback = Promise<any> ();
</script>

### {{Document/createTransition()}} ### {#DOMTransition-prepare}
### {{Document/createTransition()}} ### {#ViewTransition-prepare}

<div algorithm>
The [=method steps=] for
<dfn method for=Document>createTransition(|init|)</dfn>
are as follows:

1. Let |transition| be a new {{DOMTransition}} object in [=this's=] [=relevant Realm=].
1. Let |transition| be a new {{ViewTransition}} object in [=this's=] [=relevant Realm=].

1. Set |transition|'s [=DOMTransition/DOM update callback=] to |init|[{{DOMTransitionInit/updateDOM}}].
1. Set |transition|'s [=ViewTransition/DOM update callback=] to |init|[{{ViewTransitionInit/updateDOM}}].

1. Let |document| be [=this's=] [=relevant global object's=] [=associated document=].

1. If |document|'s [=active DOM transition=] is not null, then [=skip the page transition=] |document|'s [=active DOM transition=]
with an "{{AbortError}}" {{DOMException}} in [=this's=] [=relevant Realm=].

Note: This can result in two asynchronous [=DOMTransition/DOM update
Note: This can result in two asynchronous [=ViewTransition/DOM update
callbacks=] running concurrently. One for the |document|'s current
[=active DOM transition=], and another for this |transition|. As per
the [design of this feature](#transitions-as-enhancements), it's
Expand Down Expand Up @@ -544,11 +544,11 @@ callback UpdateDOMCallback = Promise<any> ();
</pre>
</div>

## The {{DOMTransition}} interface ## {#the-domtransition-interface}
## The {{ViewTransition}} interface ## {#the-domtransition-interface}

<script type=idl>
[Exposed=Window]
interface DOMTransition {
interface ViewTransition {
undefined skipTransition();
readonly attribute Promise<undefined> finished;
readonly attribute Promise<undefined> ready;
Expand All @@ -557,15 +557,15 @@ interface DOMTransition {
</script>

<div class="note">
The {{DOMTransition}} represents and controls
The {{ViewTransition}} represents and controls
a single same-document transition. That is, it controls a transition where the
starting and ending document are the same, possibly with changes to the
document's DOM structure.
</div>

A {{DOMTransition}} has the following:
A {{ViewTransition}} has the following:

<dl dfn-for="DOMTransition">
<dl dfn-for="ViewTransition">
: <dfn>tagged elements</dfn>
:: a [=/map=],
whose keys are [=page transition tags=] and whose values are [=captured elements=].
Expand Down Expand Up @@ -595,18 +595,18 @@ A {{DOMTransition}} has the following:
Initially [=a new promise=] in [=this's=] [=relevant Realm=].
</dl>

The {{DOMTransition/finished}} [=getter steps=] are to return [=this's=] [=DOMTransition/finished promise=].
The {{ViewTransition/finished}} [=getter steps=] are to return [=this's=] [=ViewTransition/finished promise=].

The {{DOMTransition/ready}} [=getter steps=] are to return [=this's=] [=DOMTransition/ready promise=].
The {{ViewTransition/ready}} [=getter steps=] are to return [=this's=] [=ViewTransition/ready promise=].

The {{DOMTransition/domUpdated}} [=getter steps=] are to return [=this's=] [=DOMTransition/DOM updated promise=].
The {{ViewTransition/domUpdated}} [=getter steps=] are to return [=this's=] [=ViewTransition/DOM updated promise=].

### {{DOMTransition/skipTransition()}} ### {#DOMTransition-skipTransition}
### {{ViewTransition/skipTransition()}} ### {#ViewTransition-skipTransition}

<div algorithm>
The [=method steps=] for <dfn method for="DOMTransition">skipTransition()</dfn> are:
The [=method steps=] for <dfn method for="ViewTransition">skipTransition()</dfn> are:

1. If [=this=]'s [=DOMTransition/phase=] is not "`done`",
1. If [=this=]'s [=ViewTransition/phase=] is not "`done`",
then [=skip the page transition=] for [=this=]
with an "{{AbortError}}" {{DOMException}}.
</div>
Expand Down Expand Up @@ -656,18 +656,18 @@ The {{DOMTransition/domUpdated}} [=getter steps=] are to return [=this's=] [=DOM

1. If |document|'s [=document/active DOM transition=] is not null, then:

1. If |document|'s [=document/active DOM transition=]'s [=DOMTransition/phase=] is "`pending-capture`", then [=perform an outgoing capture=] with |document|'s [=document/active DOM transition=].
1. If |document|'s [=document/active DOM transition=]'s [=ViewTransition/phase=] is "`pending-capture`", then [=perform an outgoing capture=] with |document|'s [=document/active DOM transition=].

1. Otherwise, if |document|'s [=document/active DOM transition=]'s [=DOMTransition/phase=] is "`animating`", then [=update transition DOM=] for |document|'s [=document/active DOM transition=].
1. Otherwise, if |document|'s [=document/active DOM transition=]'s [=ViewTransition/phase=] is "`animating`", then [=update transition DOM=] for |document|'s [=document/active DOM transition=].
</div>

## [=Perform an outgoing capture=] ## {#perform-an-outgoing-capture-algorithm}

<div algorithm>
To <dfn>perform an outgoing capture</dfn> given a {{DOMTransition}} |transition|,
To <dfn>perform an outgoing capture</dfn> given a {{ViewTransition}} |transition|,
perform the following steps:

1. Let |taggedElements| be |transition|'s [=DOMTransition/tagged elements=].
1. Let |taggedElements| be |transition|'s [=ViewTransition/tagged elements=].

1. Let |usedTransitionTags| be a new [=/set=] of strings.

Expand Down Expand Up @@ -740,25 +740,25 @@ The {{DOMTransition/domUpdated}} [=getter steps=] are to return [=this's=] [=DOM
Note: A task is queued here because the texture read back in [=capturing the image=] may be async,
although the render steps in the HTML spec act as if it's synchronous.

1. If |transition|'s [=DOMTransition/phase=] is "`done`", then abort these steps.
1. If |transition|'s [=ViewTransition/phase=] is "`done`", then abort these steps.

Note: This happens if |transition| was [=skip the page transition|skipped=] before this point.

1. [=Call the DOM update callback=] of |transition|.

1. [=promise/React=] to |transition|'s [=DOMTransition/DOM updated promise=]:
1. [=promise/React=] to |transition|'s [=ViewTransition/DOM updated promise=]:

* If the promise does not settle within an implementation-defined timeout, then:

1. If |transition|'s [=DOMTransition/phase=] is "`done`", then return.
1. If |transition|'s [=ViewTransition/phase=] is "`done`", then return.

Note: This happens if |transition| was [=skip the page transition|skipped=] before this point.

1. [=Skip the page transition=] |transition| with a "{{TimeoutError}}" {{DOMException}}.

* If the promise was fulfilled, then:

1. If |transition|'s [=DOMTransition/phase=] is "`done`", then return.
1. If |transition|'s [=ViewTransition/phase=] is "`done`", then return.

Note: This happens if |transition| was [=skip the page transition|skipped=] before this point.

Expand Down Expand Up @@ -809,11 +809,11 @@ The {{DOMTransition/domUpdated}} [=getter steps=] are to return [=this's=] [=DOM

Note: The frame-by-frame parts of the animation are handled in [=update transition DOM=].

1. [=Resolve=] [=DOMTransition/ready promise=].
1. [=Resolve=] [=ViewTransition/ready promise=].

* If the promise was rejected with reason |r|, then:

1. If |transition|'s [=DOMTransition/phase=] is "`done`", then return.
1. If |transition|'s [=ViewTransition/phase=] is "`done`", then return.

Note: This happens if |transition| was [=skip the page transition|skipped=] before this point.

Expand All @@ -823,33 +823,33 @@ The {{DOMTransition/domUpdated}} [=getter steps=] are to return [=this's=] [=DOM
## Skip the page transition ## {#skip-the-page-transition-algorithm}

<div algorithm>
To <dfn>skip the page transition</dfn> for {{DOMTransition}} |transition| with reason |reason|:
To <dfn>skip the page transition</dfn> for {{ViewTransition}} |transition| with reason |reason|:

1. Let |document| be |transition|'s [=relevant global object's=] [=associated document=].

1. [=Assert=]: |document|'s [=document/active DOM transition=] is |transition|.

1. [=Assert=]: |transition|'s [=DOMTransition/phase=] is not "`done`".
1. [=Assert=]: |transition|'s [=ViewTransition/phase=] is not "`done`".

1. If |transition|'s [=DOMTransition/phase=] is [=phases/before=] "`dom-update-callback-called`", then [=call the DOM update callback=] of |transition|.
1. If |transition|'s [=ViewTransition/phase=] is [=phases/before=] "`dom-update-callback-called`", then [=call the DOM update callback=] of |transition|.

1. Set [=document/transition suppressing rendering=] to false.

1. If |transition|'s [=DOMTransition/phase=] is equal to or [=phases/after=] "`animating`", then:
1. If |transition|'s [=ViewTransition/phase=] is equal to or [=phases/after=] "`animating`", then:

1. Remove all associated [=page-transition pseudo-elements=] from |document|.

Issue: There needs to be a definition/link for "remove".

Issue: There needs to be a definition/link for "associated".

1. Set |transition|'s [=DOMTransition/phase=] to "`done`".
1. Set |transition|'s [=ViewTransition/phase=] to "`done`".

1. Set |document|'s [=document/active DOM transition=] to null.

1. [=Reject=] |transition|'s [=DOMTransition/ready promise=] with |reason|.
1. [=Reject=] |transition|'s [=ViewTransition/ready promise=] with |reason|.

1. [=Reject=] |transition|'s [=DOMTransition/finished promise=] with |reason|.
1. [=Reject=] |transition|'s [=ViewTransition/finished promise=] with |reason|.
</div>

## [=Capture the image=] ## {#capture-the-image-algorithm}
Expand Down Expand Up @@ -890,7 +890,7 @@ The {{DOMTransition/domUpdated}} [=getter steps=] are to return [=this's=] [=DOM
## [=Update transition DOM=] ## {#update-transition-dom-algorithm}

<div algorithm>
To <dfn>update transition DOM</dfn> given a {{DOMTransition}} |transition|:
To <dfn>update transition DOM</dfn> given a {{ViewTransition}} |transition|:

1. Let |document| be |transition|'s [=relevant global object's=] [=associated document=].

Expand All @@ -903,7 +903,7 @@ The {{DOMTransition/domUpdated}} [=getter steps=] are to return [=this's=] [=DOM

Issue: There needs to be a definition/link for "active animation".

1. Set |transition|'s [=DOMTransition/phase=] to "`done`".
1. Set |transition|'s [=ViewTransition/phase=] to "`done`".

1. Remove all associated [=page-transition pseudo-elements=] from |document|.

Expand All @@ -913,11 +913,11 @@ The {{DOMTransition/domUpdated}} [=getter steps=] are to return [=this's=] [=DOM

1. Set |document|'s [=document/active DOM transition=] to null.

1. [=Resolve=] |transition|'s[=DOMTransition/finished promise=].
1. [=Resolve=] |transition|'s[=ViewTransition/finished promise=].

1. Return.

1. [=map/For each=] |tag| -> |capturedElement| of |transition|'s [=DOMTransition/tagged elements=]:
1. [=map/For each=] |tag| -> |capturedElement| of |transition|'s [=ViewTransition/tagged elements=]:

1. If |capturedElement| has an "incoming element", run [=capture the image=]
on |capturedElement|'s "incoming element" and update the displayed
Expand Down Expand Up @@ -957,7 +957,7 @@ The {{DOMTransition/domUpdated}} [=getter steps=] are to return [=this's=] [=DOM
## [=Animate a page transition=] ## {#animate-a-page-transition-algorithm}

<div algorithm>
To <dfn>animate a page transition</dfn> given a {{DOMTransition}} |transition|:
To <dfn>animate a page transition</dfn> given a {{ViewTransition}} |transition|:

1. Generate a <<keyframe>> named "page-transition-fade-out" in
[=user-agent origin=] as follows:
Expand Down Expand Up @@ -989,7 +989,7 @@ The {{DOMTransition/domUpdated}} [=getter steps=] are to return [=this's=] [=DOM
}
</code></pre>

1. [=map/For each=] |tag| -> |capturedElement| of |transition|'s [=DOMTransition/tagged elements=]:
1. [=map/For each=] |tag| -> |capturedElement| of |transition|'s [=ViewTransition/tagged elements=]:

1. If neither of |capturedElement|'s [=captured element/outgoing image=] or [=captured element/incoming element=] is null:

Expand Down Expand Up @@ -1021,7 +1021,7 @@ The {{DOMTransition/domUpdated}} [=getter steps=] are to return [=this's=] [=DOM
</code></pre>


1. Set |transition|'s [=DOMTransition/phase=] to "`animating`".
1. Set |transition|'s [=ViewTransition/phase=] to "`animating`".

Issue: How are keyframes scoped to user-agent origin? We could decide
scope based on whether `animation-name` in the computed style
Expand All @@ -1034,11 +1034,11 @@ The {{DOMTransition/domUpdated}} [=getter steps=] are to return [=this's=] [=DOM
## [=Create transition pseudo-elements=] ## {#create-transition-pseudo-elements-algorithm}

<div algorithm>
To <dfn>create transition pseudo-elements</dfn> for a {{DOMTransition}} |transition|:
To <dfn>create transition pseudo-elements</dfn> for a {{ViewTransition}} |transition|:

1. Let |transitionRoot| be the result of creating a new ''::page-transition'' pseudo-element.

1. [=map/For each=] |transitionTag| → |capturedElement| of |transition|'s [=DOMTransition/tagged elements=]:
1. [=map/For each=] |transitionTag| → |capturedElement| of |transition|'s [=ViewTransition/tagged elements=]:

1. Let |container| be the result of creating a new ''::page-transition-container'' pseudo-element with the tag |transitionTag|.

Expand Down Expand Up @@ -1113,18 +1113,18 @@ The {{DOMTransition/domUpdated}} [=getter steps=] are to return [=this's=] [=DOM
</div>

<div algorithm>
To <dfn>call the DOM update callback</dfn> of a {{DOMTransition}} |transition|:
To <dfn>call the DOM update callback</dfn> of a {{ViewTransition}} |transition|:

1. [=Assert=]: |transition|'s [=DOMTransition/phase=] is [=phases/before=] "`dom-update-callback-called`".
1. [=Assert=]: |transition|'s [=ViewTransition/phase=] is [=phases/before=] "`dom-update-callback-called`".

1. Let |callbackPromise| be the result of [=/invoking=] |transition|'s [=DOMTransition/DOM update callback=].
1. Let |callbackPromise| be the result of [=/invoking=] |transition|'s [=ViewTransition/DOM update callback=].

1. Set |transition|'s [=DOMTransition/phase=] to "`dom-update-callback-called`".
1. Set |transition|'s [=ViewTransition/phase=] to "`dom-update-callback-called`".

1. [=promise/React=] to |callbackPromise|:

* If |callbackPromise| was fulfilled, then [=resolve=] |transition|'s [=DOMTransition/DOM updated promise=].
* If |callbackPromise| was fulfilled, then [=resolve=] |transition|'s [=ViewTransition/DOM updated promise=].

* If |callbackPromise| was rejected with reason |r|, then [=reject=] |transition|'s [=DOMTransition/DOM updated promise=] with |r|.
* If |callbackPromise| was rejected with reason |r|, then [=reject=] |transition|'s [=ViewTransition/DOM updated promise=] with |r|.

</div>