Transitions de navigation directionnelle

Les applications monopages (SPA) donnent l'impression de naviguer en remplaçant le contenu de la page sans accéder à une nouvelle page. Par défaut, le contenu est simplement remplacé, sans aucune transition. Les transitions directionnelles peuvent renforcer visuellement une relation spatiale entre les vues.

En faisant glisser le nouveau contenu dans la direction où l'utilisateur se déplace, vous créez une carte mentale de la structure de l'application. Par exemple, un site de produits peut afficher une transition vers la droite pour "suivant" et vers la gauche pour "précédent", ou un diaporama peut effectuer une transition vers le haut et vers le bas pour afficher les diapositives suivantes et précédentes.

Mise en œuvre, étape par étape

1. Détecter le sens de navigation : déterminez si l'utilisateur avance ou recule dans le flux de l'application. La façon dont vous détectez la direction dépend de votre cas d'utilisation.
2. Déclencher une transition avec des types : transmettez la direction dans un tableau types à document.startViewTransition() pour catégoriser la transition.
3. Définir des animations directionnelles avec CSS : utilisez la pseudo-classe :active-view-transition-type() pour appliquer des animations spécifiques en fonction du type de navigation.

Définir des images clés

Définissez des animations de glissement vers et depuis chaque direction. Pour des performances optimales, animez les changements de position à l'aide de la propriété transform ou des propriétés de transformation individuelles scale, rotate et translate. opacity est généralement performant, mais évitez d'animer d'autres propriétés CSS sans vérifier au préalable qu'elles ne déclenchent pas de mise en page ou de peinture.

/* 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%); }
}

Configurer les paramètres d'animation partagés

Utilisez le sélecteur ::view-transition-group(root) pour appliquer des paramètres d'animation partagés par toutes les transitions.

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

Appliquer des animations directionnelles

Utilisez la pseudo-classe active-view-transition-type pour cibler les vues de transition spécifiquement lorsque le type "forward" ou "backward" est actif.

/* 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;
}

Déclencher la transition

Lors de la navigation, transmettez le type approprié à la méthode startViewTransition.

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

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

Accessibilité

Respectez toujours les préférences des utilisateurs concernant la réduction des animations en les désactivant ou en les simplifiant.

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

Stratégies de remplacement

L'API View Transitions est une amélioration progressive. Dans les navigateurs non compatibles, document.startViewTransition sera undefined. Vous devez encapsuler votre logique de navigation dans une vérification de détection de fonctionnalité pour vous assurer que la mise à jour du DOM se produit toujours immédiatement sans animation, comme illustré dans cette fonction d'assistance.

/**
 * 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
  });
}