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

Next lesson: Challenge - Anchor panel

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies