Vloeiende overgangen met de View Transition API

Bramus

Met de View Transition API kunt u naadloze visuele overgangen creëren tussen verschillende weergaven op uw website. Dit zorgt voor een visueel aantrekkelijkere gebruikerservaring terwijl gebruikers door uw site navigeren, ongeacht of deze is gebouwd als een multi-page application (MPA) of een single-page application (SPA).

Typische situaties waarin u weergaveovergangen gebruikt, zijn onder meer:

• Een miniatuurafbeelding op een productlijstpagina die overgaat in een productafbeelding op volledige grootte op de productdetailpagina.
• Een vaste navigatiebalk die op dezelfde plek blijft staan ​​terwijl u van de ene pagina naar de andere navigeert.
• Een raster waarin de items van positie veranderen naarmate u erdoorheen filtert.

Weergaveovergangen implementeren

Weergaveovergangen zijn niet gebonden aan een specifieke toepassingsarchitectuur of een specifiek framework en kunnen niet alleen op één document worden geactiveerd, maar ook tussen twee verschillende documenten.

Beide typen weergaveovergangen zijn gebaseerd op dezelfde bouwstenen en principes:

1. De browser maakt momentopnames van de oude en nieuwe toestand.
2. De DOM wordt bijgewerkt, terwijl rendering wordt onderdrukt.
3. De overgangen worden aangestuurd door CSS-animaties.

Het enige verschil tussen beide typen is de manier waarop je ze activeert.

Overgangen in dezelfde documentweergave

Wanneer een weergaveovergang op één document wordt uitgevoerd, wordt dit een 'same-document view transition' genoemd. Dit is meestal het geval in single-page applicaties (SPA's). Overgangen naar dezelfde documentweergave worden in Chrome ondersteund vanaf Chrome 111.

Hoe te activeren

Activeer een overgang in dezelfde documentweergave door document.startViewTransition aan te roepen:

function handleClick(e) {
  // Fallback for browsers that don't support this API:
  if (!document.startViewTransition) {
    updateTheDOMSomehow();
    return;
  }

  // With a View Transition:
  document.startViewTransition(>() = updateTheDOMSomehow());
}

Voorbeeld

Het volgende kaartvoorbeeld is een SPA die gebruikmaakt van overgangen in dezelfde documentweergave om de kaarten te animeren wanneer er nieuwe kaarten worden toegevoegd of verwijderd.

Begin met bouwen

Raadpleeg de speciale documentatiepagina voor alles wat u moet weten over overgangen in dezelfde documentweergave.

Overgangen in dezelfde documentweergave maken

Overgangen tussen documentweergaven

Wanneer er een weergaveovergang plaatsvindt tussen twee verschillende documenten, wordt dit een documentovergang genoemd. Dit is typisch voor MPA's. Documentovergangen worden ondersteund in Chrome 126 en hoger.

Hoe te activeren

Overgangen tussen documentweergaven worden geactiveerd door een navigatie tussen documenten met dezelfde oorsprong, mits beide pagina's hiervoor hebben gekozen. Met andere woorden: er is geen API om een ​​overgang tussen documentweergaven te starten. Wanneer een gebruiker op een link klikt, activeert die klik de overgang.

Om u aan te melden, gebruikt u het volgende CSS-fragment:

@view-transition {
  navigation: auto;
}

Voorbeeld

Het volgende Stack Navigator-voorbeeld is een MPA die gebruikmaakt van overgangen tussen twee verschillende documenten. Afhankelijk van of u dieper in de navigatie duikt of niet, worden pagina's naar de stack geduwd of eraf gesprongen.

Begin met bouwen

Leer alles wat u moet weten over overgangen tussen documentweergaven.

Overgangen tussen documentweergaven maken