Skip to content

[css-view-transition-1] Simplify handling of ::view-transition #12767

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

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

[css-view-transition-1] Simplify handling of ::view-transition #12767

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
26 changes: 8 additions & 18 deletions css-view-transitions-1/Overview.bs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -689,8 +689,12 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;
Its [=originating element=] is the document's [=document element=],
and its [=containing block=] is the [=snapshot containing block=].

This element is only rendered when it has children.

Note: This element serves as the [=tree/parent=] of all ''::view-transition-group()'' pseudo-elements.

Note: The position of this element within the [=document element=] does not matter, as its [=containing block=] is the [=snapshot containing block=].

### View Transition Named Subtree Root: the ''::view-transition-group()'' pseudo-element ### {#::view-transition-group}

The <dfn>::view-transition-group()</dfn> [=pseudo-element=]
Expand Down Expand Up @@ -836,7 +840,7 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;
When a {{Document}}'s [=document/active view transition=]'s [=ViewTransition/phase=] is "`animating`",
the boxes generated by any element in that {{Document}} with [=captured in a view transition=]
and its [=element contents=],
except [=ViewTransition/transition root pseudo-element=]'s [=tree/inclusive descendants=],
except the [=tree/inclusive descendants=] of the ''::view-transition'' [=pseudo-element=] on that {{Document}}'s [=document element=],
are not painted (as if they had ''visibility: hidden'') and
do not respond to hit-testing (as if they had ''pointer-events: none'').

Expand Down Expand Up @@ -1102,10 +1106,6 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;
Note: This is [=marked as handled=] to prevent duplicate {{unhandledrejection}}s,
as this promise only ever rejects along with the [=update callback done promise=].

: <dfn>transition root pseudo-element</dfn>
:: a ''::view-transition''.
Initially a new ''::view-transition''.

: <dfn>initial snapshot containing block size</dfn>
:: a [=tuple=] of two numbers (width and height), or null.
Initially null.
Expand Down Expand Up @@ -1158,14 +1158,6 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;

Note: This is used to hold dynamic styles relating to transitions.

: <dfn>show view transition tree</dfn>
:: A boolean. Initially false.

When this is true, [=this=]'s [=active view transition=]'s [=ViewTransition/transition root pseudo-element=] renders as a child of [=this=]'s [=document element=],
with [=this=]'s [=document element=] being its [=originating element=].

Note: The position of the [=ViewTransition/transition root pseudo-element=] within the [=document element=] does not matter, as the [=ViewTransition/transition root pseudo-element=]'s [=containing block=] is the [=snapshot containing block=].

: <dfn>update callback queue</dfn>
:: A [=/list=], initially empty.
</dl>
Expand Down Expand Up @@ -1475,14 +1467,12 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;

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

1. Set |document|'s [=show view transition tree=] to true.

1. [=map/For each=] |transitionName| → |capturedElement| of |transition|'s [=ViewTransition/named elements=]:

1. Let |group| be a new ''::view-transition-group()'',
with its [=view transition name=] set to |transitionName|.

1. Append |group| to |transition|'s [=ViewTransition/transition root pseudo-element=].
1. Append |group| to the ''::view-transition'' [=pseudo-element=] on |document|'s [=document element=].

1. Let |imagePair| be a new ''::view-transition-image-pair()'',
with its [=view transition name=] set to |transitionName|.
Expand Down Expand Up @@ -1829,7 +1819,7 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;

1. Let |hasActiveAnimations| be a boolean, initially false.

1. [=list/For each=] |element| of |transition|'s [=ViewTransition/transition root pseudo-element=]'s [=tree/inclusive descendants=]:
1. [=list/For each=] |element| of the [=tree/inclusive descendants=] of the ''::view-transition'' [=pseudo-element=] on |document|'s [=document element=]:
1. For each |animation| whose [=timeline=] is a [=document timeline=] associated with |document|,
and contains at least one [=animation/associated effect=] whose [=effect target=] is |element|,
set |hasActiveAnimations| to true if any of the following conditions are true:
Expand Down Expand Up @@ -1978,7 +1968,7 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;
and |style| is in |document|'s [=document/dynamic view transition style sheet=],
then remove |style| from |document|'s [=document/dynamic view transition style sheet=].

1. Set |document|'s [=document/show view transition tree=] to false.
1. Remove all children of the ''::view-transition'' [=pseudo-element=] on |document|'s [=document element=].

1. Set |document|'s [=document/active view transition=] to null.
</div>
Expand Down