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.
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.
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.
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.
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.
Top opt-in, gebruik het volgende CSS-fragment:
@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.
Begin met bouwen
Leer alles wat er te weten valt over overgangen tussen weergaven tussen documenten.