Wie man Seitenübergänge in React Router animiert
Schritt-für-Schritt-Anleitung für Routen-Animationen in React Router: View Transitions API vs. AnimatePresence, Scroll-Erhalt und Speichereffizienz.
Kernaussage
Um Seitenübergänge in React Router sauber zu animieren, nutzen Sie entweder die native View Transitions API des Browsers mit startTransition() oder umschließen Ihre Route-Outlets mit AnimatePresence von Framer Motion über useLocation().key. Halten Sie Ausgangs-Animationen unter 200 ms für gefühlte Schnelligkeit, stellen Sie die Scroll-Position wieder her und vermeiden Sie doppelte DOM-Bäume.
Die Herausforderung ungemounteter Seiten
React Router entfernt die alte Seitenkomponente bei einem Pfadwechsel augenblicklich aus dem DOM. Damit eine Ausgangs-Animation ablaufen kann, müssen die alten Knoten temporär im Dokument gehalten werden. Bibliotheken wie Framer Motion lösen dies über AnimatePresence anhand des Routing-Schlüssels.
Die native View Transitions API in React Router
Neuere Versionen von React Router unterstützen die View Transitions API des Browsers nativ über die viewTransition-Eigenschaft an Links. Dies erstellt einen Schnappschuss der alten Ansicht und überblendet zur neuen via CSS-Pseudoelementen – ganz ohne doppelten Speicherverbrauch durch parallele Komponenten-Bäume.
- Nutzen Sie document.startViewTransition() oder das viewTransition-Attribut an Links
- Halten Sie die Gesamtdauer unter 250 ms für reaktionsschnelle Navigation
- Platzieren Sie statische Header und Navigationsleisten außerhalb des animierten Bereichs
- Stellen Sie die Scroll-Position beim Seitenwechsel sofort wieder her
Übergänge geteilter Elemente (Shared Elements)
Beim Wechsel von einer Übersichtskarte zur Detailansicht vermittelt das Aufklappen der Karte zum Seitenkopf wertvollen räumlichen Kontext. Die View Transitions API unterstützt dies nativ über die CSS-Eigenschaft view-transition-name.
Reduzierte Bewegung und sofortiges Umschalten
Navigation darf niemals Schwindel erzeugen. Ist prefers-reduced-motion aktiv, schalten Sie Routen-Animationen vollständig ab, sodass Ansichten unmittelbar wechseln.
Wichtige Prinzipien
- Gestalten Sie Ausgangs-Animationen kürzer als Eingangs-Animationen (z. B. 150 ms zu 200 ms)
- Nutzen Sie die View Transitions API gegen Speicherüberlastung
- Halten Sie feste UI-Rahmen (Header, Navigation) außerhalb des Übergangs-Containers
- Schalten Sie Routen-Animationen bei reduzierter Bewegung komplett aus
Häufige Fragen
Quellen
- View Transitions API — MDN Web Docs
- React Router View Transitions — Remix / Shopify