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/hide-and-seek.mdx
+55-55Lines changed: 55 additions & 55 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -65,30 +65,31 @@ main {
65
65
Here is an interesting quirk: Scroll down a bit so part of the page content moves beneath the fixed search box at the top of the page.
66
66
67
67
<Media>
68
-
<divclass="small">
69
-
<spanclass="light:sl-hidden">
70
-
71
-
</span>
72
-
<spanclass="dark:sl-hidden">
73
-
74
-
</span>
75
-
</div>
76
-
<pslot="caption">Text scrolls beneath the header</
77
-
p>
68
+
<divclass="small">
69
+
<spanclass="light:sl-hidden">
70
+
71
+
</span>
72
+
<spanclass="dark:sl-hidden">
73
+
74
+
</span>
75
+
</div>
76
+
<pslot="caption">Text scrolls beneath the header</p>
78
77
</Media>
79
78
80
79
Now navigate to a different page. During the view transition, the `::view-transition-group(main)` pseudo-element, along with its old and new images, enters the view transition layer. Since these images are taller than the viewport, they obscure the search box momentarily.
The first rule targets the header which holds the searchbox. The second line targets the page navigation of the mobile view.
126
127
127
128
The paint order for old images in the view transition layer mirrors the paint order of their corresponding elements in the DOM. Images exclusive to the new page [are painted after that](/basics/pseudos/#rendering-pseudo-elements). If you need precise control over the stacking order of the pseudo-elements within the view transition layer, you can adjust it by assigning a `z-index` to the group pseudo-element. This is not needed for our Starlight example, as the header renders after the main area and thus the header's pseudo-element will render above that of the main area. But if you are looking for an example, here it is:
129
+
128
130
```css
129
131
::view-transition-group(header) {
130
132
z-index: 1;
@@ -136,18 +138,19 @@ The paint order for old images in the view transition layer mirrors the paint or
136
138
Another approach is to clip view transition images at their corresponding image pair or transition group. For example, this site uses a sliding view transition animation for the main content. Without specific adjustments, this animation would cause the main content to overlap the sidebar on the left and the in-page navigation on the right:
137
139
138
140
<divclass="large">
139
-
<Media>
140
-
<spanclass="light:sl-hidden">
141
-
.
222
-
223
-
So until _nested_ view transition groups and _scoped_ view transitions are supported by all major browsers, we have to play some tricks to simulate the clipping. See the next section on how to do that.
227
+
So until _nested_ view transition groups and _scoped_ view transitions are supported by all major browsers, we have to play some tricks to simulate the clipping. See the next section on how to do that.
224
228
225
229
## Taming Images of Clipped Elements
226
230
@@ -240,13 +244,11 @@ This behavior can work well for elements that naturally feel like they should ov
240
244
241
245
If unwanted images appear during view transitions, there are currently two main ways to prevent this (with nested view transition groups as a third option when they become available):
242
246
243
-
244
247
-**Dynamically Set View Transition Names:**
245
-
Modify the view-transition-name property just before the transition starts. This allows you to selectively include or exclude elements from the transition, ensuring only the intended elements participate.
248
+
Modify the view-transition-name property just before the transition starts. This allows you to selectively include or exclude elements from the transition, ensuring only the intended elements participate.
246
249
247
250
-**Obscure Images with Overlapping Elements:**
248
-
Place other pseudo-elements above the images you want to hide. These elements can be part of the view transition and strategically positioned to block unwanted visuals during the transition.
249
-
251
+
Place other pseudo-elements above the images you want to hide. These elements can be part of the view transition and strategically positioned to block unwanted visuals during the transition.
250
252
251
253
### Dynamically Named View Transition
252
254
@@ -318,6 +320,7 @@ Such effects can be prevented by just setting the `z-index` property on the DOM
318
320
Stencils do not need to be simple rectangles. Especially when you want to cover all four sides of an area the following trick can come in handy: Here the stencil is a copy of the clipped area with some surrounding elements, featuring a hole in the middle to reveal the original elements.
319
321
320
322
Stencils don't have to be limited to basic rectangles. Especially when covering all four sides of an area, one approach is to create a stencil that mimics the clipped content, including adjacent elements, but with a cut-out section in the middle. This design allows the stencil to mask unwanted areas while revealing the desired content through the central "window."
323
+
321
324
</SidePicture>
322
325
323
326
<SidePicture>
@@ -329,13 +332,10 @@ Stencils don't have to be limited to basic rectangles. Especially when covering
329
332
src="/basics/hide-and-seek/list/"
330
333
></iframe>
331
334
332
-
333
-
In our scrollable list example, we overlay the list with a stencil that covers both the list and the surrounding area. On top of the stencil is a copy of the list and a button. To ensure users interact with the original list beneath, we apply `pointer-events: none` to the stencil.
334
-
335
+
In our scrollable list example, we overlay the list with a stencil that covers both the list and the surrounding area. On top of the stencil is a copy of the list and a button. To ensure users interact with the original list beneath, we apply `pointer-events: none` to the stencil.
335
336
336
337
The stencil has a transparent, rectangular cut-out aligned with the visible portion of the scrollable list, excluding the scrollbar. This effect is achieved by using a mask image on the stencil. As a result, only the list items within the scrollable area remain visible through the cut-out, while all other elements, including the original scrollbar, are hidden. JavaScript keeps the two scrollbars synchronized.
337
338
338
-
339
339
The stencil gets a view transition name assigned to it. During the view transition, the stencil’s pseudo-element appears in front of everything else, as demonstrated when hovering over the orange sketch below.
0 commit comments