You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: src/content/docs/basics/pseudos.mdx
+11-7Lines changed: 11 additions & 7 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -14,7 +14,7 @@ What are those pseudo-elements of the View Transition API and how can I style an
14
14
15
15
The key feature of the View Transition API is that it generates images for parts of your DOM and operates solely on those images. This enables the API to display sections of the old page exactly as they appeared before the transition began.
16
16
17
-
None of your actual DOM elements are directly visible during the transition. Everything is covered by the generated images, which are moved around in their own layer above your web page.
17
+
Without further customization, none of your actual DOM elements are directly visible during the transition. Everything is covered by the generated images, which are moved around in their own layer above your web page.
18
18
19
19
## The Theater Curtain
20
20
@@ -150,7 +150,7 @@ Now that we've covered the general concept, we can move on from the magic and di
150
150
151
151
## View Transition Names
152
152
153
-
You tell the view transition API which elements should be animated by assigning `view-transition-name` CSS properties to the HTML elements.
153
+
You tell the view transition API which elements should be animated by assigning `view-transition-name` CSS properties to HTML elements. You can use inline styling or a stylesheet to assign the view transition name.
154
154
155
155
```html title="Assigning a view transition name using inline styling"
156
156
<mainstyle="view-transition-name: main">
@@ -162,12 +162,14 @@ main {
162
162
}
163
163
```
164
164
165
-
At the start of the view transition, the **view transition names have to be unique** in the DOM.
165
+
Capturing of images happens in two passes. One captures images of the old DOM state before the view transition, and the other pass captures the new images of the target state.
166
+
167
+
For both passes, when the View Transition API captures the images to be animated, the **view transition names have to be unique** in the DOM.
166
168
167
169
There are two exceptions:
168
-
- The API ignores the `view-transition-name` of a fragmented element, i.e. an element that consists of two or more boxes, like an inline element that spans two lines.
170
+
- The API ignores the `view-transition-name` of a fragmented element, i.e. an element that consists of two or more boxes, like an inline element that spans two lines. View transition names assigned to such elements are ignored.
169
171
170
-
- The API ignores the `view-transition-name` of an element if that element is not rendered, like the `<head>`, or if it is skipped. For instance, you can use the same `view-transition-name` multiple times within the same DOM, provided that all but one instance have their `display` CSS property set to `none`. This can also be done by setting an HTML element's hidden attribute or property. Looking for an example? This technique is utilized in the intra-document [image morph examples](/basics/examples/#image-morph-examples) on this site. This trick also works with an ancestor with `content-visibility: hidden` but not with a simple `visibility: hidden` directly on the element.
172
+
- The API also ignores the `view-transition-name` of an element if that element is not rendered, like the `<head>`, or if it is skipped. For instance, you can use the same `view-transition-name` multiple times within the same DOM, provided that all but one instance have their `display` CSS property set to `none`. This can also be done by setting an HTML element's hidden attribute or property. Looking for an example? This technique is utilized in the intra-document [image morph examples](/basics/examples/#image-morph-examples) on this site. This trick also works with an ancestor with `content-visibility: hidden` but not with a simple `visibility: hidden` directly on the element.
171
173
172
174
173
175
The static user agent stylesheet provides one default name for the document, called `root`.
@@ -185,10 +187,12 @@ This default defines an animation for the current viewport. If you want to anima
185
187
```
186
188
The special value `none` removes a potentially set view transition name.
187
189
188
-
Other special names are [`match-element`](#auto-generated-names-match-element) and [`auto`](#auto-generated-names-auto), and all names beginning with `-ua-`.
190
+
Other special names are [`match-element`](#auto-generated-names-match-element) and [`auto`](#auto-generated-names-auto), and all names beginning with `-ua-` as in _u_ser-_a_gent, as this is a reserved namespace for browser generated view transition names.
189
191
190
192
### Escaping
191
-
Do not quote the names. They are not strings but [custom-ident](https://developer.mozilla.org/de/docs/Web/CSS/custom-ident) values. Ensure proper escaping of special characters. The simplest, most portable approach is to just use upper and lower case letters from A to Z, digits from 0 to 9, an underscore `_` or a hyphen `-` character. But don't start the name with a digit. While all other characters with a code < 128 need to be escaped, codes > 127 like 😄 seem to work just fine in view transition names. In browsers, you can use `CSS.escape()` to properly escape strings as custom identifiers.
193
+
Do not quote the names. They are not strings but [custom-ident](https://developer.mozilla.org/de/docs/Web/CSS/custom-ident) values. Ensure proper escaping of special characters. The simplest, most portable approach is to just use upper and lower case letters from A to Z, digits from 0 to 9, an underscore `_` or a hyphen `-` character. But don't start the name with a positive or negative number.
194
+
195
+
While all other characters with a code < 128 need to be escaped, codes > 127 like 😄 seem to work just fine in view transition names. In browsers, you can use `CSS.escape()` to properly escape strings as custom identifiers.
192
196
193
197
It is not important to have much imagination when choosing names. They can be the similar to the `id` of an element or name of a unique tag like `body` or `footer`.
Copy file name to clipboardExpand all lines: src/content/docs/basics/test-page.mdx
+24-22Lines changed: 24 additions & 22 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -14,19 +14,19 @@ import TestPage from "../../../components/TestPage.astro";
14
14
15
15
This page shows whether your current browser <spanid="browser"></span>has native support for view transitions and related APIs like the Navigation API and Speculation Rules.
0 commit comments