From 258a87eb796541ce33a8b3b8ebd239dbc3640471 Mon Sep 17 00:00:00 2001 From: Noam Rosenthal Date: Wed, 31 Jan 2024 21:52:16 +0000 Subject: [PATCH] [css-view-transitions-2] Specify 'view-transition-class' and corresponding algorithms (#9773) * [css-view-transitions-2] Add 'view-transition-class' A `view-transition-class` property allows specifying view-transition pseudo-elements that apply to multiple participating elements without having to replicate them. In this PR: - Specifying `view-transition-class` - Extending the pseudo-element syntax to support `::view-transition-foo(name.class)` - Extending the capture algorithms and data structure to capture the classes - Added a simple example for using classes Based on [this resolution](https://github.com/w3c/csswg-drafts/issues/8319#issuecomment-1876155920). Closes #8319 --------- Co-authored-by: Khushal Sagar <63884798+khushalsagar@users.noreply.github.com> Co-authored-by: vmpstr --- css-view-transitions-2/Overview.bs | 130 +++++++++++++++++++++++++++++ 1 file changed, 130 insertions(+) diff --git a/css-view-transitions-2/Overview.bs b/css-view-transitions-2/Overview.bs index 37dee90ca06d..62c929534c87 100644 --- a/css-view-transitions-2/Overview.bs +++ b/css-view-transitions-2/Overview.bs @@ -32,8 +32,12 @@ spec:css-view-transitions-1; text: call the update callback; type: dfn; text: perform pending transition operations; type: dfn; text: setup view transition; type: dfn; + text: named view transition pseudo-element; type: dfn; spec:dom; type:dfn; text:document spec:css22; type:dfn; text:element +spec:selectors-4; type:dfn; + text:selector + text:type selector spec:html text: latest entry; type: dfn; text: was created via cross-origin redirects; type: dfn; @@ -122,6 +126,8 @@ spec:infra; type:dfn; text:list ## Examples ## {#examples} +### Cross-document view-transitions ### {#cross-doc-example} +
To generate the same cross-fade as in the first example [[css-view-transitions-1#examples]], but across documents, we don't need JavaScript. @@ -199,6 +205,84 @@ spec:infra; type:dfn; text:list ```
+### 'view-transition-class' ### {#vt-class-example} + +view-transition-class provides a way to use the same style +for multiple view transition pseudo elements without having to replicate the corresponding pseudo-elements. + +
+ This example creates a transition with each box participating under its own name, while applying + a 1-second duration to the animation of all the boxes: + + ```html +
+
+
+ ``` + + ```css + div.box { + view-transition-class: any-box; + width: 100px; + height: 100px; + } + #red-box { + view-transition-name: red-box; + background: red; + } + #green-box { + view-transition-name: green-box; + background: green; + } + #yellow-box { + view-transition-name: yellow-box; + background: yellow; + } + + /* The following style would apply to all the boxes, thanks to 'view-transition-class' */ + ::view-transition-group(*.any-box) { + animation-duration: 1s; + } + ``` + +
+ + +# CSS Properties # {#css-properties} + +## Applying the same style to multiple participating elements: the 'view-transition-class' property ## {#view-transition-class-prop} + + 
+	Name: view-transition-class
+	Value: none | <>*
+	Initial: none
+	Inherited: no
+	Percentages: n/a
+	Computed Value: as specified
+	Animation type: discrete
+
+ + The 'view-transition-class' can be used to apply the same style rule to multiple [=named view transition pseudo-elements=] which may have a different 'view-transition-name'. + While 'view-transition-name' is used to match between the element in the old state with its corresponding element in the new state, 'view-transition-class' is used + only to apply styles using the view-transition pseudo-elements + (''::view-transition-group()'', ''::view-transition-image-pair()'', ''::view-transition-old()'', ''::view-transition-new()''). + + Note that 'view-transition-class' by itself doesn't mark an element for capturing, it is only used as an additional + way to style an element that already has a 'view-transition-name'. + +
+ : none + :: No class would apply to the [=named view transition pseudo-elements=] generated for this element. + + : <>* + :: All of the specified <> values (apart from none) are applied when used in [=named view transition pseudo-element=] selectors. + none is an invalid <> for 'view-transition-class', even when combined with other <>s. + + Note: If the same 'view-transition-name' is specified for an element both in the old and new states of the transition, + only the 'view-transition-class' values from the new state apply. This also applies for cross-document view-transitions: + classes from the old document would only apply if their corresponding 'view-transition-name' was not specified in the new document. +
+ # Pseudo-classes # {#pseudo-classes} ## Active View Transition Pseudo-class '':active-view-transition()''' ## {#the-active-view-transition-pseudo} @@ -252,6 +336,34 @@ document.startViewTransition({update: updateTheDOMSomehow}); ``` +# Additions to named view-transition pseudo-elements # {#pseudo-element-additions} + + The [=named view transition pseudo-elements=] + (''view-transition-group()'', ''view-transition-image-pair()'', ''view-transition-old()'', ''view-transition-new()'') + are extended to support the following syntax: + + 
+		::view-transition-group(<><>)
+		::view-transition-image-pair(<><>)
+		::view-transition-old(<><>)
+		::view-transition-new(<><>)
+
+ + where <> works as previously defined, and + <> has the following syntax definition: + + 
+		<pt-class-selector> = ('.' <>)*
+
+ + A [=named view transition pseudo-element=] [=selector=] which has one or more <> values + in its <> would only match an element if the [=captured element/class list=] value in + [=ViewTransition/named elements=] for the pseudo-element's 'view-transition-name' [=list/contains=] all of those values. + + The specificity of a [=named view transition pseudo-element=] [=selector=] + with a <> + is equivalent to a [=class selector=] with the equivalent number of classes. + # CSS rules # {#css-rules} ## The ''@view-transition'' rule ## {#view-transition-rule} @@ -385,6 +497,24 @@ The {{CSSViewTransitionRule}} represents a ''@view-transition'' rule. :: Null or a [=list=] of strings, initially null. +## Additions to [=captured element=] struct ## {#additions-to-captured-element-struct} + +The [=captured element=] struct should contain these fields, in addition to the existing ones: + +
+ : class list + :: a [=/list=] of strings, initially empty. +
+ +## Algorithms to capture 'view-transition-class': ## {#vt-class-algorithms} +
+When capturing the old or new state for an element, perform the following steps given a [=captured element=] |capture| and an [=element=] |element|: + + 1. Set |capture|'s [=captured element/class list=] to the [=computed value=] of |element|'s 'view-transition-class'. + + Note: This is written in a monkey-patch manner, and will be merged into the algorithm once the L1 spec graduates. +
+ ## Monkey patches to HTML ## {#monkey-patch-to-html}