Overgangen voor gerichte navigatie

Apps met één pagina (single page applications, SPA's) geven de indruk van navigatie door de content van de pagina te vervangen zonder naar een nieuwe pagina te navigeren. Standaard wordt de content gewoon vervangen, zonder overgangen. Gerichte overgangen kunnen een ruimtelijke relatie tussen weergaven visueel versterken.

Door nieuwe content in beeld te schuiven vanuit de richting waarin de gebruiker beweegt, maak je een mentale kaart van de app-structuur. Een productsite kan bijvoorbeeld een overgang naar rechts tonen voor 'vooruit' en naar links voor 'terug', of een diavoorstelling kan omhoog en omlaag gaan om de volgende en vorige dia's te tonen.

Stapsgewijze implementatie

1. Navigatierichting detecteren: Bepaal of de gebruiker vooruit of achteruit gaat in het app-proces. Hoe je de richting herkent, hangt af van je use case.
2. Trigger Transition with Types: Geef de richting door in een types-matrix naar document.startViewTransition() om de overgang te categoriseren.
3. Richtingsanimaties definiëren met CSS: Gebruik de pseudoklasse :active-view-transition-type() om specifieke animaties toe te passen op basis van het navigatietype.

Sleutelframes definiëren

Definieer schuifanimaties van en naar elke richting. Voor de beste prestaties animeert u positiewijzigingen met de eigenschap transform of de afzonderlijke transformatie-eigenschappen scale, rotate en translate. opacity presteert over het algemeen ook goed, maar animeer geen andere CSS-property's zonder eerst te verifiëren dat ze geen opmaak of weergave activeren.

/* Slide an element out to the left */
@keyframes slide-to-left {
  /* Mandatory: animate `transform` instead of inset properties for better performance. */
  to { transform: translateX(-100%); }
}

/* Slide an element in from the right */
@keyframes slide-from-right {
  from { transform: translateX(100%); }
}

/* Slide an element out to the right */
@keyframes slide-to-right {
  to { transform: translateX(100%); }
}

/* Slide an element in from the left */
@keyframes slide-from-left {
  from { transform: translateX(-100%); }
}

Gedeelde animatie-instellingen instellen

Gebruik de kiezer ::view-transition-group(root) om animatie-instellingen toe te passen die worden gedeeld voor alle overgangen.

::view-transition-group(root){
  animation: 0.4s ease-in-out both;
}

Gerichte animaties toepassen

Gebruik de pseudoklasse active-view-transition-type om de overgangsweergaven specifiek te targeten als het type 'forward' of 'backward' actief is.

/* MANDATORY: Apply forward animations when the 'forward' type is active */
html:active-view-transition-type(forward)::view-transition-old(root) {
  animation-name: slide-to-left;
}
html:active-view-transition-type(forward)::view-transition-new(root) {
  animation-name: slide-from-right;
}

/* MANDATORY: Apply backward animations when the 'backward' type is active */
html:active-view-transition-type(backward)::view-transition-old(root) {
  animation-name: slide-to-right;
}
html:active-view-transition-type(backward)::view-transition-new(root) {
  animation-name: slide-from-left;
}

De overgang activeren

Geef bij het navigeren het juiste type door aan de methode startViewTransition.

const transitionType = yourTransitionTypeLogic();
const updateDOM = yourUpdateDOMLogic();

document.startViewTransition({
  update: updateDOM,
  types: [transitionType] // Matches the CSS :active-view-transition-type() selectors
});

Toegankelijkheid

Respecteer altijd de gebruikersvoorkeuren voor minder beweging door animaties uit te zetten of te vereenvoudigen.

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(root) {
    animation: none !important;
  }
}

Reservestrategieën

De View Transitions API is een progressive enhancement. In niet-ondersteunde browsers is document.startViewTransition undefined. Je moet je navigatielogica verpakken in een functiedetectiecontrole om te zorgen dat de DOM-update nog steeds onmiddellijk plaatsvindt zonder animatie, zoals getoond in deze helperfunctie.

/**
 * Navigates to a new view with a directional transition.
 * @param {Function} updateDOM - Callback to update the DOM state.
 * @param {string} direction - Either 'forward' or 'backward'.
 */
function navigate(updateDOM, direction) {
  // Feature detect for browsers that do not support View Transitions
  if (!document.startViewTransition) {
    updateDOM();
    return;
  }

  // Start transition with the specific navigation type
  document.startViewTransition({
    update: updateDOM,
    types: [direction] // Matches the CSS :active-view-transition-type() selectors
  });
}