Challenge - View transitions
Build a page-transition app with view transitions.
Transition with view transitions
View transitions turn the move between two states into an animation. Give an element view-transition-name: card and it joins the transition, matching the same name on the other side.
Set the duration on the ::view-transition-old(card) and ::view-transition-new(card) pseudo-elements with animation-duration. Same-document transitions start from code; cross-document ones use the @view-transition { navigation: auto } declaration.
Exercise Set up the view transition card
Add a view transition to a product card. On .product-card add view-transition-name: card. On ::view-transition-old(card) add animation-duration: 0.4s. On ::view-transition-new(card) add animation-duration: 0.4s.
Show example solution
/* product card */
.product-card {
view-transition-name: card;
}
/* old snapshot */
::view-transition-old(card) {
animation-duration: 0.4s;
}
/* new snapshot */
::view-transition-new(card) {
animation-duration: 0.4s;
}Test yourself
-
Write the view-transition-name declaration
.product-card { ____: card; }Show answer
.product-card { view-transition-name: card; } -
Which declaration enables cross-document view transitions?
@view-transition { /* ??? */ }- @cross-document { enabled: true }
- view-transition-mode: cross-document
- navigation: auto
- document-transition: enabled
Show answer
navigation: auto — Correct. Inside @view-transition, navigation: auto turns on cross-document transitions.
-
Match view transition pieces
- view-transition-name
- Binds an element to a transition
- ::view-transition-old
- Old snapshot pseudo-element
- ::view-transition-new
- New snapshot pseudo-element
- @view-transition
- Cross-document transition