Deze pagina is vertaald door de Cloud Translation API.

Vloeiende overgangen met de View Transition API

Bramus

De View Transition API geeft u de mogelijkheid om naadloze visuele overgangen tussen verschillende weergaven op uw website te creëren. Dit zorgt voor een visueel aantrekkelijkere gebruikerservaring voor gebruikers terwijl ze door uw site navigeren, ongeacht of deze is gebouwd als een applicatie met meerdere pagina's (MPA) of een applicatie met één pagina (SPA).

Typische situaties waarin u weergaveovergangen zou gebruiken, zijn onder meer:

Een miniatuurafbeelding op een productvermeldingspagina die overgaat in een productafbeelding op volledige grootte op de productdetailpagina.
Een vaste navigatiebalk die op zijn plaats blijft terwijl u van de ene pagina naar de andere navigeert.
Een raster met items die van positie veranderen terwijl je filtert.

Overgangen gemaakt met de View Transition API. Probeer de demosite . Vereist Chrome 111 of hoger.

Implementeer weergaveovergangen

Weergaveovergangen zijn niet gebonden aan een specifieke applicatiearchitectuur of raamwerk en kunnen niet alleen op een enkel document worden geactiveerd, maar ook tussen twee verschillende documenten.

Beide soorten weergavetransities zijn gebaseerd op precies dezelfde bouwstenen en principes:

De browser maakt momentopnamen van de oude en nieuwe status.
De DOM wordt bijgewerkt terwijl weergave wordt onderdrukt.
De overgangen worden mogelijk gemaakt door CSS-animaties.

Het enige dat tussen beide typen verschilt, is de manier waarop je ze activeert.

Overgangen naar weergave van hetzelfde document

Wanneer een weergaveovergang op één document wordt uitgevoerd, wordt dit een weergaveovergang voor hetzelfde document genoemd. Dit is doorgaans het geval bij toepassingen met één pagina (SPA's). Overgangen naar weergaven van hetzelfde document worden ondersteund in Chrome vanaf Chrome 111.

Browserondersteuning

Bron

Hoe te activeren

Activeer weergaveovergangen van hetzelfde document 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 weergaveovergangen van hetzelfde document gebruikt om de kaarten te animeren wanneer er nieuwe worden toegevoegd of verwijderd.

Opname van de Cards-demo . Vereist Chrome 111 of hoger.

Begin met bouwen

Raadpleeg de speciale documentatiepagina voor alles wat u moet weten over weergaveovergangen van hetzelfde document.

Bouw overgangen naar weergaven van hetzelfde document

Overgangen tussen documentweergaven

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

Browserondersteuning

Hoe te activeren

Overgangen tussen weergaven tussen documenten worden geactiveerd door navigatie tussen verschillende documenten van dezelfde oorsprong, als beide pagina's zich hebben aangemeld. Met andere woorden: er is geen API die kan worden aangeroepen om een overgang tussen weergaven tussen verschillende documenten te starten. Wanneer een gebruiker op een link klikt, activeert de klik de weergaveovergang.

Gebruik het volgende CSS-fragment om u aan te melden:

@view-transition {
  navigation: auto;
}

Voorbeeld

Het volgende Stack Navigator-voorbeeld is een MPA die overgangen tussen documentovergangen tussen twee verschillende documenten gebruikt. Afhankelijk van of je dieper in de navigatie gaat of niet, worden pagina's op de stapel geduwd of springen ze eraf.

Opname van de Stack Navigator-demo . Vereist Chrome 126 of hoger.

Begin met bouwen

Leer alles wat er te weten valt over overgangen tussen weergaven tussen documenten.

Bouw overgangen tussen documenten