View Transitions i praksis

To spor: SPA og MPA

Der er to typer af view-transitions: same-document transitions og cross-document transitions.

• Same-document: du bliver i samme dokument og kalder typisk document.startViewTransition(() => { ... }) i JavaScript, mens du opdaterer DOM’en.
• Cross-document: du navigerer mellem to sider, og begge dokumenter skal opt-in med @view-transition { navigation: auto; }.

view-transition-name skiller elementer ud fra root-transitionen

Uden ekstra styling bliver hele view-opdateringen i praksis animeret som én samlet cross-fade. Hvis bestemte elementer skal have deres egen overgang, skal de have et view-transition-name.

.box-1 {
  view-transition-name: box-1;
}

.box-2 {
  view-transition-name: box-2;
}

Det giver dig særskilte snapshots, som du bagefter kan style via pseudo-elementerne.

En vigtig detalje fra MDN: et custom view-transition-name skal være unikt blandt de renderede elementer. Hvis to elementer har samme navn samtidig, kan transitionen blive afbrudt. Hvis du har mange elementer i samme dokument, kan match-element være nyttigt, fordi browseren så tildeler dem unikke interne navne automatisk.

Selve animationen styles på pseudo-elementerne

Når et element har et navn, kan du style snapshots af den gamle og nye tilstand separat:

::view-transition-old(box-1) {
  animation: 0.4s ease both fade-out;
}

::view-transition-new(box-1) {
  animation: 0.4s ease both fade-in;
}

Det er her View Transitions bliver interessante: du animerer ikke DOM-elementet direkte i overgangen, men de snapshots browseren laver af den gamle og nye tilstand.

Hvis du vil arbejde mere aktivt med JavaScript-delen, er ViewTransition.ready og ViewTransition.finished nyttige steder at koble ekstra logik eller cleanup på. Hvis API’et ikke findes, bør løsningen stadig kunne falde tilbage til en almindelig DOM-opdatering eller navigation.