Comment animer les transitions de page dans React Router
Guide pas à pas pour animer les changements de route dans React Router : View Transitions API vs AnimatePresence, gestion du scroll et performances.
À retenir
Pour animer les transitions de page dans React Router, privilégiez la View Transitions API native du navigateur avec startTransition() ou enveloppez vos sorties de route dans AnimatePresence de Framer Motion via useLocation().key. Gardez les animations de sortie sous 200 ms pour préserver la réactivité perçue, restaurez la position de défilement et évitez de doubler la mémoire avec deux arbres React simultanés.
Le défi du démontage des pages
React Router démonte instantanément le composant sortant lors d'un changement d'URL. Pour qu'une animation de sortie se déroule, les éléments du DOM doivent être maintenus temporairement dans le document jusqu'à la fin de la transition. Des outils comme Framer Motion gèrent cela via AnimatePresence en suivant la clé de route.
La View Transitions API native dans React Router
Les versions récentes de React Router prennent en charge nativement la View Transitions API via la propriété viewTransition sur les liens. Ce mécanisme capture un instantané de l'ancienne page et anime vers la nouvelle via des pseudo-éléments, évitant la surcharge mémoire de deux arbres React simultanés.
- Utilisez document.startViewTransition() ou la prop viewTransition sur Link
- Limitez la durée de transition sous 250 ms pour une navigation réactive
- Positionnez les en-têtes et barres de navigation hors du conteneur animé
- Restaurez immédiatement la position de scroll au changement de page
Transitions d'éléments partagés
Lorsqu'on navigue d'une grille vers une page de détail, étendre la vignette pour former le bandeau d'en-tête offre un repère spatial précieux. La View Transitions API gère cela nativement grâce à la propriété CSS view-transition-name partagée entre la liste et la vue détaillée.
Mouvement réduit et navigation instantanée
La navigation ne doit jamais donner le tournis. Lorsque prefers-reduced-motion est activé, neutralisez les transitions de route pour que les pages changent instantanément.
Principes clés à retenir
- Faites sortir les pages plus vite qu'elles n'entrent (ex. 150 ms sortie, 200 ms entrée)
- Privilégiez la View Transitions API pour éviter de saturer la mémoire vive
- Conservez les menus et bandeaux fixes hors de la zone animée
- Désactivez les animations de route sous prefers-reduced-motion
Questions fréquentes
Sources
- View Transitions API — MDN Web Docs
- React Router View Transitions — Remix / Shopify