diff --git a/files/en-us/web/api/view_transition_api/index.md b/files/en-us/web/api/view_transition_api/index.md index 6d497ab801f027b..6d10f6f00dc414f 100644 --- a/files/en-us/web/api/view_transition_api/index.md +++ b/files/en-us/web/api/view_transition_api/index.md @@ -66,18 +66,20 @@ See [Using the View Transition API](/en-US/docs/Web/API/View_Transition_API/Usin - {{cssxref("view-transition-name")}} - : Provides the selected element with a separate identifying name and causes it to participate in a separate view transition from the root view transition — or no view transition if the `none` value is specified. +- {{cssxref("view-transition-class")}} + - : Provides an additional method of styling to selected elements that have a `view-transition-name`. ### Pseudo-elements - {{cssxref("::view-transition")}} - : The root of the view transitions overlay, which contains all view transitions and sits over the top of all other page content. -- {{cssxref("::view-transition-group", "::view-transition-group()")}} +- {{cssxref("::view-transition-group()")}} - : The root of a single view transition. -- {{cssxref("::view-transition-image-pair", "::view-transition-image-pair()")}} +- {{cssxref("::view-transition-image-pair()")}} - : The container for a view transition's old and new views — before and after the transition. -- {{cssxref("::view-transition-old", "::view-transition-old()")}} +- {{cssxref("::view-transition-old()")}} - : A static snapshot of the old view, before the transition. -- {{cssxref("::view-transition-new", "::view-transition-new()")}} +- {{cssxref("::view-transition-new()")}} - : A live representation of the new view, after the transition. ## Examples diff --git a/files/en-us/web/api/view_transition_api/using/index.md b/files/en-us/web/api/view_transition_api/using/index.md index c652f99d36e841c..efc06ec8e4d3cc1 100644 --- a/files/en-us/web/api/view_transition_api/using/index.md +++ b/files/en-us/web/api/view_transition_api/using/index.md @@ -49,14 +49,14 @@ To handle creating the outbound and inbound transition animations, the API const ``` > [!NOTE] -> A {{cssxref("::view-transition-group")}} subtree is created for every captured `view-transition-name`. +> A {{cssxref("::view-transition-group()")}} subtree is created for every captured `view-transition-name`. In the case of same-document transitions (SPAs), the pseudo-element tree is made available in the document. In the case of cross-document transitions (MPAs), the pseudo-element tree is made available in the destination document only. The most interesting parts of the tree structure are as follows: - {{cssxref("::view-transition")}} is the root of view transitions overlay, which contains all view transition snapshot groups and sits over the top of all other page content. -- A {{cssxref("::view-transition-group")}} acts as a container for each view transition snapshot group. The `root` argument specifies the default snapshot group — the view transition animation will apply to the snapshot whose `view-transition-name` is `root`. By default, this is the {{cssxref(":root")}} element, because the default browser styles define this: +- A {{cssxref("::view-transition-group()")}} acts as a container for each view transition snapshot group. The `root` argument specifies the default snapshot group — the view transition animation will apply to the snapshot whose `view-transition-name` is `root`. By default, this is the {{cssxref(":root")}} element, because the default browser styles define this: ```css :root { @@ -66,13 +66,13 @@ The most interesting parts of the tree structure are as follows: Be aware however that page authors can change this by unsetting the above, and setting `view-transition-name: root` on a different element. -- {{cssxref("::view-transition-old")}} targets the static snapshot of the old page element, and {{cssxref("::view-transition-new")}} targets the live snapshot of the new page element. Both of these render as replaced content, in the same manner as an {{htmlelement("img")}} or {{htmlelement("video")}}, meaning that they can be styled with handy properties like {{cssxref("object-fit")}} and {{cssxref("object-position")}}. +- {{cssxref("::view-transition-old()")}} targets the static snapshot of the old page element, and {{cssxref("::view-transition-new()")}} targets the live snapshot of the new page element. Both of these render as replaced content, in the same manner as an {{htmlelement("img")}} or {{htmlelement("video")}}, meaning that they can be styled with handy properties like {{cssxref("object-fit")}} and {{cssxref("object-position")}}. > [!NOTE] -> It is possible to target different DOM elements with different custom view transition animations by setting a different {{cssxref("view-transition-name")}} on each one. In such cases, a `::view-transition-group` is created for each one. See [Different animations for different elements](#different_animations_for_different_elements) for an example. +> It is possible to target different DOM elements with different custom view transition animations by setting a different {{cssxref("view-transition-name")}} on each one. In such cases, a `::view-transition-group()` is created for each one. See [Different animations for different elements](#different_animations_for_different_elements) for an example. > [!NOTE] -> As you'll see later, to customize the outbound and inbound animations you need to target the {{cssxref("::view-transition-old")}} and {{cssxref("::view-transition-new")}} pseudo-elements with your animations, respectively. +> As you'll see later, to customize the outbound and inbound animations you need to target the {{cssxref("::view-transition-old()")}} and {{cssxref("::view-transition-new()")}} pseudo-elements with your animations, respectively. ## Creating a basic view transition @@ -130,7 +130,7 @@ Most appearance transitions are given a default smooth cross-fade animation, as - `height` and `width` transitions have a smooth scaling animation applied. - `position` and `transform` transitions have a smooth movement animation applied. -You can modify the default animations in any way you want using regular CSS — target the "from" animation with {{cssxref("::view-transition-old")}}, and the "to" animation with {{cssxref("::view-transition-new")}}. +You can modify the default animations in any way you want using regular CSS — target the "from" animation with {{cssxref("::view-transition-old()")}}, and the "to" animation with {{cssxref("::view-transition-new()")}}. For example, to change the speed of both: @@ -217,7 +217,7 @@ With this CSS applied, the generated pseudo-element tree will now look like this The existence of the second set of pseudo-elements allows separate view transition styling to be applied just to the `
`. The different old and new view captures are handled separately from one another. > [!NOTE] -> The value of `view-transition-name` can be anything you want except for `none` — the `none` value specifically means that the element will not participate in a view transition. +> The value of `view-transition-name` is a unique {{cssxref("custom-ident")}}; it can be any identifier that wouldn't be misinterpreted as a keyword. The keyword `none` is not a valid name, as that value means the element will not participate in any view transitions. Also avoid `auto`, as it's being discussed as a way to [determine `view-transition-name` automatically](https://drafts.csswg.org/css-view-transitions-2/#auto-vt-name). > > `view-transition-name` values must also be unique. If two rendered elements have the same `view-transition-name` at the same time, {{domxref("ViewTransition.ready")}} will reject and the transition will be skipped. @@ -283,7 +283,7 @@ figcaption { } ``` -This works because, by default, `::view-transition-group` transitions `width` and `height` between the old and new views with a smooth scale. We just needed to set a fixed `height` on both states to make it work. +This works because, by default, `::view-transition-group()` transitions `width` and `height` between the old and new views with a smooth scale. We just needed to set a fixed `height` on both states to make it work. > **Note:** [Smooth transitions with the View Transition API](https://developer.chrome.com/docs/web-platform/view-transitions/) contains several other customization examples. diff --git a/files/en-us/web/css/@view-transition/index.md b/files/en-us/web/css/@view-transition/index.md index 590fbf5fbd9d0bc..349db3a31d52d45 100644 --- a/files/en-us/web/css/@view-transition/index.md +++ b/files/en-us/web/css/@view-transition/index.md @@ -96,10 +96,10 @@ See this [transitions multi-page app](https://mdn.github.io/dom-examples/view-tr ## See also - {{cssxref("::view-transition", "::view-transition")}} -- {{cssxref("::view-transition-new", "::view-transition-new()")}} -- {{cssxref("::view-transition-old", "::view-transition-old()")}} -- {{cssxref("::view-transition-group", "::view-transition-group()")}} -- {{cssxref("::view-transition-image-pair", "::view-transition-image-pair()")}} +- {{cssxref("::view-transition-new()")}} +- {{cssxref("::view-transition-old()")}} +- {{cssxref("::view-transition-group()")}} +- {{cssxref("::view-transition-image-pair()")}} - [View Transition API](/en-US/docs/Web/API/View_Transition_API) - [CSS at-rules](/en-US/docs/Web/CSS/CSS_syntax/At-rule) - [CSS at-rule functions](/en-US/docs/Web/CSS/CSS_syntax/At-rule_functions) diff --git a/files/en-us/web/css/_doublecolon_view-transition-group/index.md b/files/en-us/web/css/_doublecolon_view-transition-group/index.md index 9280b0e54e555b7..1db5f2edfbe9e27 100644 --- a/files/en-us/web/css/_doublecolon_view-transition-group/index.md +++ b/files/en-us/web/css/_doublecolon_view-transition-group/index.md @@ -1,5 +1,5 @@ --- -title: ::view-transition-group +title: ::view-transition-group() slug: Web/CSS/::view-transition-group page-type: css-pseudo-element browser-compat: css.selectors.view-transition-group @@ -7,11 +7,11 @@ browser-compat: css.selectors.view-transition-group {{CSSRef}} -The **`::view-transition-group`** [CSS](/en-US/docs/Web/CSS) [pseudo-element](/en-US/docs/Web/CSS/Pseudo-elements) represents a single view transition snapshot group. +The **`::view-transition-group()`** [CSS](/en-US/docs/Web/CSS) [pseudo-element](/en-US/docs/Web/CSS/Pseudo-elements) represents a single view transition snapshot group. -During a view transition, `::view-transition-group` is included in the associated pseudo-element tree as explained in [The view transition pseudo-element tree](/en-US/docs/Web/API/View_Transition_API/Using#the_view_transition_pseudo-element_tree). It is only ever a child of {{cssxref("::view-transition")}}, and has a {{cssxref("::view-transition-image-pair")}} as a child. +During a view transition, `::view-transition-group()` is included in the associated pseudo-element tree as explained in [The view transition pseudo-element tree](/en-US/docs/Web/API/View_Transition_API/Using#the_view_transition_pseudo-element_tree). It is only ever a child of {{cssxref("::view-transition")}}, and has a {{cssxref("::view-transition-image-pair()")}} as a child. -`::view-transition-group` is given the following default styling in the UA stylesheet: +`::view-transition-group()` is given the following default styling in the UA stylesheet: ```css :root::view-transition-group(*) { @@ -24,7 +24,7 @@ During a view transition, `::view-transition-group` is included in the associate } ``` -By default, selected elements initially mirror the size and position of the {{cssxref("::view-transition-old")}} pseudo-element representing the "old" view state, or the {{cssxref("::view-transition-new")}} pseudo-element representing the "new" view state if there isn't an "old" view state. +By default, selected elements initially mirror the size and position of the {{cssxref("::view-transition-old()")}} pseudo-element representing the "old" view state, or the {{cssxref("::view-transition-new()")}} pseudo-element representing the "new" view state if there isn't an "old" view state. If there's both an "old" and "new" view state, styles in the view transition style sheet animate this pseudo-element's {{cssxref("width")}} and {{cssxref("height")}} from the size of the "old" view state's border box to that of the "new" view state's border box. @@ -36,19 +36,23 @@ In addition, the element's transform is animated from the "old" view state's scr ## Syntax ```css-nolint -::view-transition-group() { +::view-transition-group([ ? ] | ) { /* ... */ } ``` -`` can be one of the following values: +### Parameters - `*` - - : Causes the pseudo-element to match all view transition groups. + - : The [universal selector (`*`)](/en-US/docs/Web/CSS/Universal_selectors); selects all view transition groups on a page. - `root` - - : Causes the pseudo-element to match the default `root` view transition group created by the user agent to contain the view transition for the overall page. This group includes any element not assigned to its own specific view transition group via the {{cssxref("view-transition-name")}} property. -- {{cssxref("custom-ident")}} - - : Causes the pseudo-element to match a specific view transition group created by assigning the given {{cssxref("custom-ident")}} to an element via the {{cssxref("view-transition-name")}} property. + - : The {{cssxref("view-transition-name")}} applied to {{cssxref(":root")}} causes the pseudo-element to match the default `root` view transition group. This is the snapshot group created by the user agent to contain the view transition for the overall page. This group includes any element not assigned to its own specific view transition snapshot group via the `view-transition-name` property. +- `` + - : The {{cssxref("custom-ident")}} set as the value of the {{cssxref("view-transition-name")}} property. +- `` + - : The {{cssxref("custom-ident")}} set as the value of the {{cssxref("view-transition-class")}} property, preceded by a period (`.`). + +The {{cssxref("specificity")}} of the named view transition pseudo-element is equal to the [specificity of the type selector](/en-US/docs/Web/CSS/Specificity#type_column), unless the parameter used is the universal selector is used, in which case the specificity is zero. ## Examples @@ -58,6 +62,10 @@ In addition, the element's transform is animated from the "old" view state's scr animation-timing-function: ease; z-index: 1; } + +::view-transition-group(.card) { + animation-duration: 1s; +} ``` ## Specifications diff --git a/files/en-us/web/css/_doublecolon_view-transition-image-pair/index.md b/files/en-us/web/css/_doublecolon_view-transition-image-pair/index.md index 0904d6e15e96dd0..46a77f4e032875b 100644 --- a/files/en-us/web/css/_doublecolon_view-transition-image-pair/index.md +++ b/files/en-us/web/css/_doublecolon_view-transition-image-pair/index.md @@ -1,5 +1,5 @@ --- -title: ::view-transition-image-pair +title: ::view-transition-image-pair() slug: Web/CSS/::view-transition-image-pair page-type: css-pseudo-element browser-compat: css.selectors.view-transition-image-pair @@ -7,11 +7,11 @@ browser-compat: css.selectors.view-transition-image-pair {{CSSRef}} -The **`::view-transition-image-pair`** [CSS](/en-US/docs/Web/CSS) [pseudo-element](/en-US/docs/Web/CSS/Pseudo-elements) represents a container for a [view transition's](/en-US/docs/Web/API/View_Transition_API) "old" and "new" view states — before and after the transition. +The **`::view-transition-image-pair()`** [CSS](/en-US/docs/Web/CSS) [pseudo-element](/en-US/docs/Web/CSS/Pseudo-elements) represents a container for a [view transition's](/en-US/docs/Web/API/View_Transition_API) "old" and "new" view states — before and after the transition. -During a view transition, `::view-transition-image-pair` is included in the associated pseudo-element tree as explained in [The view transition pseudo-element tree](/en-US/docs/Web/API/View_Transition_API/Using#the_view_transition_pseudo-element_tree). It is only ever a child of a {{cssxref("::view-transition-group")}}. In terms of children, it can have a {{cssxref("::view-transition-new")}} or a {{cssxref("::view-transition-old")}}, or both. +During a view transition, `::view-transition-image-pair()` is included in the associated pseudo-element tree as explained in [The view transition pseudo-element tree](/en-US/docs/Web/API/View_Transition_API/Using#the_view_transition_pseudo-element_tree). It is only ever a child of a {{cssxref("::view-transition-group()")}}. In terms of children, it can have a {{cssxref("::view-transition-new()")}} or a {{cssxref("::view-transition-old()")}}, or both. -`::view-transition-image-pair` is given the following default styling in the UA stylesheet: +`::view-transition-image-pair()` is given the following default styling in the UA stylesheet: ```css :root::view-transition-image-pair(*) { @@ -24,24 +24,26 @@ During a view transition, `::view-transition-image-pair` is included in the asso } ``` -During a view transition, `::view-transition-image-pair` has {{cssxref("isolation", "isolation: isolate")}} set on it in the view transition style sheet so that its children can be blended with non-normal blend modes without affecting other visual outputs. +During a view transition, `::view-transition-image-pair()` has {{cssxref("isolation", "isolation: isolate")}} set on it in the view transition style sheet so that its children can be blended with non-normal blend modes without affecting other visual outputs. ## Syntax ```css-nolint -::view-transition-image-pair() { +::view-transition-image-pair([ ? ] | ) { /* ... */ } ``` -`` can be one of the following values: +### Parameters - `*` - - : Causes the pseudo-element to match all view transition groups. + - : The [universal selector (`*`)](/en-US/docs/Web/CSS/Universal_selectors); selects all view transition groups on a page. - `root` - - : Causes the pseudo-element to match the default `root` view transition group created by the user agent to contain the view transition for the overall page. This group includes any element not assigned to its own specific view transition group via the {{cssxref("view-transition-name")}} property. -- {{cssxref("custom-ident")}} - - : Causes the pseudo-element to match a specific view transition group created by assigning the given {{cssxref("custom-ident")}} to an element via the {{cssxref("view-transition-name")}} property. + - : Causes the pseudo-element to match the default `root` view transition snapshot group created by the user agent to contain the view transition for the overall page. This group includes any element not assigned to its own specific view transition snapshot group via the {{cssxref("view-transition-name")}} property. +- `` + - : The {{cssxref("custom-ident")}} set as the value of the {{cssxref("view-transition-name")}} property. +- `` + - : The {{cssxref("custom-ident")}} set as the value of the {{cssxref("view-transition-class")}} property preceded by a period (`.`). ## Examples @@ -49,6 +51,10 @@ During a view transition, `::view-transition-image-pair` has {{cssxref("isolatio ::view-transition-image-pair(root) { isolation: auto; } + +::view-transition-image-pair(.card) { + isolation: isolate; +} ``` ## Specifications diff --git a/files/en-us/web/css/_doublecolon_view-transition-new/index.md b/files/en-us/web/css/_doublecolon_view-transition-new/index.md index 43e79427782ef63..28b952b4c29f347 100644 --- a/files/en-us/web/css/_doublecolon_view-transition-new/index.md +++ b/files/en-us/web/css/_doublecolon_view-transition-new/index.md @@ -1,5 +1,5 @@ --- -title: ::view-transition-new +title: ::view-transition-new() slug: Web/CSS/::view-transition-new page-type: css-pseudo-element browser-compat: css.selectors.view-transition-new @@ -7,9 +7,9 @@ browser-compat: css.selectors.view-transition-new {{CSSRef}} -The **`::view-transition-new`** [CSS](/en-US/docs/Web/CSS) [pseudo-element](/en-US/docs/Web/CSS/Pseudo-elements) represents the "new" view state of a view transition — a snapshot live representation of the state after the transition. +The **`::view-transition-new()`** [CSS](/en-US/docs/Web/CSS) [pseudo-element](/en-US/docs/Web/CSS/Pseudo-elements) represents the "new" view state of a view transition — a snapshot live representation of the state after the transition. -During a view transition, `::view-transition-new` is included in the associated pseudo-element tree as explained in [The view transition pseudo-element tree](/en-US/docs/Web/API/View_Transition_API/Using#the_view_transition_pseudo-element_tree). It is only ever a child of a {{cssxref("::view-transition-image-pair")}}, and never has any children. +During a view transition, `::view-transition-new()` is included in the associated pseudo-element tree as explained in [The view transition pseudo-element tree](/en-US/docs/Web/API/View_Transition_API/Using#the_view_transition_pseudo-element_tree). It is only ever a child of a {{cssxref("::view-transition-image-pair()")}}, and never has any children. It is a replaced element and therefore can be manipulated with properties such as {{cssxref("object-fit")}} and {{cssxref("object-position")}}. It has natural dimensions equal to the content's size. @@ -46,24 +46,26 @@ The following default styling is included in the UA stylesheet: ``` > [!NOTE] -> Additional view transition styles are also setup to animate `::view-transition-new`. These are dynamically generated during the view transition; see the specification [setup transition pseudo-elements](https://drafts.csswg.org/css-view-transitions-1/#setup-transition-pseudo-elements) and [update pseudo-element styles](https://drafts.csswg.org/css-view-transitions-1/#update-pseudo-element-styles) sections for more details. +> Additional view transition styles are also setup to animate `::view-transition-new()`. These are dynamically generated during the view transition; see the specification [setup transition pseudo-elements](https://drafts.csswg.org/css-view-transitions-1/#setup-transition-pseudo-elements) and [update pseudo-element styles](https://drafts.csswg.org/css-view-transitions-1/#update-pseudo-element-styles) sections for more details. ## Syntax ```css-nolint -::view-transition-new() { +::view-transition-new([ ? ] | ) { /* ... */ } ``` -`` can be one of the following values: +### Parameters - `*` - - : Causes the pseudo-element to match all view transition groups. + - : The [universal selector (`*`)](/en-US/docs/Web/CSS/Universal_selectors); selects all view transition groups on a page. - `root` - : Causes the pseudo-element to match the default `root` view transition snapshot group created by the user agent to contain the view transition for the overall page. This group includes any element not assigned to its own specific view transition snapshot group via the {{cssxref("view-transition-name")}} property. -- {{cssxref("custom-ident")}} - - : Causes the pseudo-element to match a specific view transition snapshot group created by assigning the given {{cssxref("custom-ident")}} to an element via the {{cssxref("view-transition-name")}} property. +- `` + - : The {{cssxref("custom-ident")}} set as the value of the {{cssxref("view-transition-name")}} property. +- `` + - : The {{cssxref("custom-ident")}} set as the value of the {{cssxref("view-transition-class")}} property preceded by a period (`.`). ## Examples diff --git a/files/en-us/web/css/_doublecolon_view-transition-old/index.md b/files/en-us/web/css/_doublecolon_view-transition-old/index.md index 78ffc9f27b18de5..25f5051d8b40773 100644 --- a/files/en-us/web/css/_doublecolon_view-transition-old/index.md +++ b/files/en-us/web/css/_doublecolon_view-transition-old/index.md @@ -1,5 +1,5 @@ --- -title: ::view-transition-old +title: ::view-transition-old() slug: Web/CSS/::view-transition-old page-type: css-pseudo-element browser-compat: css.selectors.view-transition-old @@ -7,9 +7,9 @@ browser-compat: css.selectors.view-transition-old {{CSSRef}} -The **`::view-transition-old`** [CSS](/en-US/docs/Web/CSS) [pseudo-element](/en-US/docs/Web/CSS/Pseudo-elements) represents the "old" view state of a view transition — a static snapshot of the old view, before the transition. +The **`::view-transition-old()`** [CSS](/en-US/docs/Web/CSS) [pseudo-element](/en-US/docs/Web/CSS/Pseudo-elements) represents the "old" view state of a view transition — a static snapshot of the old view, before the transition. -During a view transition, `::view-transition-old` is included in the associated pseudo-element tree as explained in [The view transition pseudo-element tree](/en-US/docs/Web/API/View_Transition_API/Using#the_view_transition_pseudo-element_tree), provided there's an "old" view state to represent. It is only ever a child of a {{cssxref("::view-transition-image-pair")}}, and never has any children. +During a view transition, `::view-transition-old()` is included in the associated pseudo-element tree as explained in [The view transition pseudo-element tree](/en-US/docs/Web/API/View_Transition_API/Using#the_view_transition_pseudo-element_tree), provided there's an "old" view state to represent. It is only ever a child of a {{cssxref("::view-transition-image-pair()")}}, and never has any children. It is a replaced element and therefore can be manipulated with properties such as {{cssxref("object-fit")}} and {{cssxref("object-position")}}. It has natural dimensions equal to the content's size. @@ -46,24 +46,26 @@ The following default styling is included in the UA stylesheet: ``` > [!NOTE] -> Additional view transition styles are also setup to animate `::view-transition-old`. These are dynamically generated during the view transition; see the specification [setup transition pseudo-elements](https://drafts.csswg.org/css-view-transitions-1/#setup-transition-pseudo-elements) and [update pseudo-element styles](https://drafts.csswg.org/css-view-transitions-1/#update-pseudo-element-styles) sections for more details. +> Additional view transition styles are also setup to animate `::view-transition-old()`. These are dynamically generated during the view transition; see the specification [setup transition pseudo-elements](https://drafts.csswg.org/css-view-transitions-1/#setup-transition-pseudo-elements) and [update pseudo-element styles](https://drafts.csswg.org/css-view-transitions-1/#update-pseudo-element-styles) sections for more details. ## Syntax ```css-nolint -::view-transition-old() { +::view-transition-old([ ? ] | ) { /* ... */ } ``` -`` can be one of the following values: +### Parameters - `*` - - : Causes the pseudo-element to match all view transition groups. + - : The universal selector (`*`) selects all view transition groups on a page. - `root` - : Causes the pseudo-element to match the default `root` view transition snapshot group created by the user agent to contain the view transition for the overall page. This group includes any element not assigned to its own specific view transition snapshot group via the {{cssxref("view-transition-name")}} property. -- {{cssxref("custom-ident")}} - - : Causes the pseudo-element to match a specific view transition snapshot group created by assigning the given {{cssxref("custom-ident")}} to an element via the {{cssxref("view-transition-name")}} property. +- `` + - : The {{cssxref("custom-ident")}} set as the value of the {{cssxref("view-transition-name")}} property. +- `` + - : The {{cssxref("custom-ident")}} set as the value of the {{cssxref("view-transition-class")}} property preceded by a period (`.`). ## Examples diff --git a/files/en-us/web/css/_doublecolon_view-transition/index.md b/files/en-us/web/css/_doublecolon_view-transition/index.md index a68f7af15b1d818..7de9c543c87b1f7 100644 --- a/files/en-us/web/css/_doublecolon_view-transition/index.md +++ b/files/en-us/web/css/_doublecolon_view-transition/index.md @@ -9,7 +9,7 @@ browser-compat: css.selectors.view-transition The **`::view-transition`** [CSS](/en-US/docs/Web/CSS) [pseudo-element](/en-US/docs/Web/CSS/Pseudo-elements) represents the root of the [view transitions](/en-US/docs/Web/API/View_Transition_API) overlay, which contains all view transition snapshot groups and sits over the top of all other page content. -During a view transition, `::view-transition` is included in the associated pseudo-element tree as explained in [The view transition pseudo-element tree](/en-US/docs/Web/API/View_Transition_API/Using#the_view_transition_pseudo-element_tree). It is the top-level node of this tree, and has one or more {{cssxref("::view-transition-group")}}s as children. +During a view transition, `::view-transition` is included in the associated pseudo-element tree as explained in [The view transition pseudo-element tree](/en-US/docs/Web/API/View_Transition_API/Using#the_view_transition_pseudo-element_tree). It is the top-level node of this tree, and has one or more {{cssxref("::view-transition-group()")}}s as children. `::view-transition` is given the following default styling in the UA stylesheet: @@ -20,7 +20,7 @@ During a view transition, `::view-transition` is included in the associated pseu } ``` -All {{cssxref("::view-transition-group")}} pseudo-elements are positioned relative to the view transition root. +All {{cssxref("::view-transition-group()")}} pseudo-elements are positioned relative to the view transition root. ## Syntax diff --git a/files/en-us/web/css/view-transition-class/index.md b/files/en-us/web/css/view-transition-class/index.md new file mode 100644 index 000000000000000..42745daabb97c2e --- /dev/null +++ b/files/en-us/web/css/view-transition-class/index.md @@ -0,0 +1,88 @@ +--- +title: view-transition-class +slug: Web/CSS/view-transition-class +page-type: css-property +status: + - experimental +browser-compat: css.properties.view-transition-class +--- + +{{CSSRef}} + +The **`view-transition-class`** [CSS](/en-US/docs/Web/CSS) property provides the selected elements with an identifying class (a {{cssxref("custom-ident")}}), providing an additional method of styling the view transitions for those elements. + +## Syntax + +```css +/* value examples */ +view-transition-class: card; + +/* Keyword value */ +view-transition-class: none; + +/* Global values */ +view-transition-class: inherit; +view-transition-class: initial; +view-transition-class: revert; +view-transition-class: revert-layer; +view-transition-class: unset; +``` + +### Values + +- {{cssxref("custom-ident")}} + - : An identifying name that causes the selected element to participate in a separate [view transition](/en-US/docs/Web/API/View_Transition_API) from the root view transition. The identifier must be unique. If two rendered elements have the same `view-transition-name` at the same time, {{domxref("ViewTransition.ready")}} will reject and the transition will be skipped. +- `none` + - : No class would apply to the named view transition pseudo-elements generated for this element. + +## Description + +The `view-transition-class` value provides a styling hook, similar to a CSS class name, which can be used to apply the same styles to multiple view transition pseudo-elements. It does not mark an element for capturing. Each individual element still needs its own unique {{cssxref("view-transition-name")}}; the `view-transition-class` is only used as an additional way to style elements that already have a `view-transition-name`. +Support for determining the `view-transition-name` automatically is being discussed in the [CSS View Transitions Module Level 2](https://drafts.csswg.org/css-view-transitions-2/#auto-vt-name) spec. + +The `view-transition-class` apply styles using the view transition pseudo-elements, including {{cssxref("::view-transition-group()")}}, {{cssxref("::view-transition-image-pair()")}}, {{cssxref("::view-transition-old()")}}, and {{cssxref("::view-transition-new()")}}. This is different from the `view-transition-name`, which matches view transitions between the element in the old state with its corresponding element in the new state. + +Until the `view-transition-class` property is fully supported in all browsers supporting view transitions, include a custom `::view-transition-group()` for each element. + +## Formal definition + +{{cssinfo}} + +## Formal syntax + +{{csssyntax}} + +## Examples + +```css +::view-transition-group(fast-card-slide) { + animation-duration: 3s; +} + +.product { + view-transition-class: fast-card-slide; +} + +.product#card1 { + view-transition-name: show-card; +} + +.product#card2 { + view-transition-name: hide-card; +} +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{cssxref("view-transition-name")}} +- [Using the View Transition API](/en-US/docs/Web/API/View_Transition_API/Using) guide +- [View Transition API](/en-US/docs/Web/API/View_Transition_API) +- [Smooth transitions with the View Transition API](https://developer.chrome.com/docs/web-platform/view-transitions/) diff --git a/files/en-us/web/css/view-transition-name/index.md b/files/en-us/web/css/view-transition-name/index.md index 08a596e38a8904b..8b73472c9c522e3 100644 --- a/files/en-us/web/css/view-transition-name/index.md +++ b/files/en-us/web/css/view-transition-name/index.md @@ -55,5 +55,6 @@ figcaption { ## See also +- {{cssxref("view-transition-class")}} - [View Transition API](/en-US/docs/Web/API/View_Transition_API) - [Smooth transitions with the View Transition API](https://developer.chrome.com/docs/web-platform/view-transitions/)