::view-transition
Learn the ::view-transition pseudo-element.
The ::view-transition root layer
When the View Transitions API runs, the browser places a layer on top of the page. The root of this layer is the ::view-transition pseudo-element. All transition visuals live under this root; it sits above the page for the whole transition.
For example, when a click reorders a list, the root layer carries the old and new list snapshots. You can give this root properties like background or position to affect the whole transition.
Inner layers
Below the root, each named transition has three more inner layers. ::view-transition-group(name) is the container carrying the old and new images; it handles position and size changes. ::view-transition-image-pair(name) holds the old and new image pair.
At the bottom sit ::view-transition-old(name) and ::view-transition-new(name). You can write a separate animation for each of these four layers, controlling each part of the transition independently.
Exercise Set a duration on both old and new snapshots
Write two separate blocks. The first uses the ::view-transition-old(root) selector and contains animation-duration: 0.3s. The second uses the ::view-transition-new(root) selector and also contains animation-duration: 0.3s.
Show example solution
/* root image duration */
::view-transition-old(root) {
animation-duration: 0.3s;
}
::view-transition-new(root) {
animation-duration: 0.3s;
}Test yourself
-
Which pseudo-element selects the root layer holding the whole transition?
- ::view-transition
- ::view-transition-old
- ::view-transition-group
- ::view-transition-new
Show answer
::view-transition — Correct. ::view-transition is the root pseudo-element holding the whole transition.
-
Write the name of the root image pair
/* root image pair */ ::view-transition-image-pair(____) { isolation: auto; }Show answer
/* root image pair */ ::view-transition-image-pair(root) { isolation: auto; } -
Match each pseudo-element to its role
- ::view-transition
- Root layer for the whole transition
- ::view-transition-old
- Old page snapshot
- ::view-transition-new
- New page snapshot
- ::view-transition-group
- Group carrying old and new