Ein- und Austrittsanimationen ohne Bibliothek

Wenn Sie mit {show && } bedingt rendern, entfernt React das Element sofort aus dem DOM, sobald show den Wert false annimmt. Für eine Exit-Animation bleibt keine Zeit, da der Knoten bereits verschwunden ist.

Enter-Animationen sind einfach; Exit-Animationen stellen die eigentliche Herausforderung dar.

Die einfachste Lösung besteht darin, das Element niemals zu unmounten. Lassen Sie es gerendert und animieren Sie bei ausgeblendetem Zustand opacity auf null sowie pointer-events: none; beim Einblenden setzen Sie opacity wieder auf eins.

So erhalten Sie in beide Richtungen sanfte Überblendungen, müssen dafür aber in Kauf nehmen, dass das Element im DOM bleibt.

Für echtes Unmounten modellieren Sie eine kleine State-Machine mit Phasen wie mounting, mounted, unmounting und unmounted. Sie entfernen den Knoten erst, sobald die Exit-Animation abgeschlossen ist.

Der State bestimmt, welche Animationsklassen in jeder Phase angewendet werden.

Sie können die State-Machine in einem benutzerdefinierten Hook kapseln, der häufig useMount genannt wird. Er erhält die gewünschte Sichtbarkeit und gibt zurück, ob das Element im DOM vorhanden sein soll, sowie seine aktuelle Phase.

Die Komponenten bleiben übersichtlich, weil die Timing-Logik im wiederverwendbaren Hook liegt.

In Anlehnung an gängige Konventionen wenden Sie beim Mounten zunächst enter und dann enter-active an, beim Entfernen entsprechend exit und dann exit-active. Die Basisklasse legt den Ausgangszustand fest, während die aktive Klasse den Endzustand mit einer Transition definiert.

Wenn Sie im richtigen Frame zwischen den beiden Klassen wechseln, wird die Animation ausgelöst.

Um zu erkennen, wann eine Exit-Animation abgeschlossen ist, hören Sie am Element auf das Ereignis transitionend. Wenn es für den Exit-Vorgang ausgelöst wird, setzen Sie den State auf unmounted und entfernen den Knoten.

So wird das Unmounten exakt an das Ende der sichtbaren Animation gekoppelt, statt an ein geschätztes Timeout.

Sie können all dies in eine Transition-Komponente kapseln, die eine in-Prop und Children entgegennimmt. Sie lässt die Children während ihrer Exit-Animation gemountet und wendet je nach Phase die passenden Klassen an.

Verbraucher müssen lediglich in umschalten und erhalten korrekte Enter- und Exit-Bewegungen ohne zusätzlichen Aufwand.

Ein wichtiges Detail: Sie müssen dem Browser erlauben, die Startklasse zu zeichnen, bevor Sie die aktive Klasse hinzufügen. Andernfalls springt das Element ohne Transition. Ein requestAnimationFrame oder ein erzwungenes Reflow zwischen den beiden Schritten stellt sicher, dass die Transition tatsächlich ausgeführt wird.

So wird garantiert, dass der Browser zuerst die Startwerte registriert.

Die Bibliothek react-transition-group stellt die Komponenten Transition und CSSTransition bereit, die genau dieses Muster implementieren, einschließlich des Klassenlebenszyklus und des Zeitpunkts für das Unmounten.

Ihre selbst entwickelte Version bildet die zentralen Ideen der Bibliothek nach. Dadurch lässt sich die Bibliothek leicht verstehen, sobald Sie selbst eine solche Lösung entwickelt haben.

Für ein einzelnes einfaches Einblenden genügt der Ansatz, das Element gemountet zu lassen, oder ein kleiner Hook; so vermeiden Sie eine zusätzliche Abhängigkeit. Für viele koordinierte Transitions, Listen mit Hinzufügungen und Entfernungen oder komplexe Abläufe spart eine Bibliothek Zeit und Fehler in Sonderfällen.

Entscheiden Sie abhängig davon, wie viel Animationskomplexität Ihre App tatsächlich benötigt.

Exit-Animationen erfordern, dass das Element bis zum Abschluss der Animation bestehen bleibt – unabhängig davon, ob Sie es dauerhaft mounten, eine State-Machine mit transitionend verwenden oder eine Bibliothek einsetzen.

Wenn Sie die Funktionsweise verstehen, können Sie den leichtgewichtigsten Ansatz wählen, der Ihre Anforderungen erfüllt.

Testen Sie Ihr Verständnis von Exit-Animationen.

Sie haben gelernt, warum Exit-Animationen schwierig sind, zwei Lösungen kennengelernt (das Element gemountet lassen und eine Mounting-State-Machine), erfahren, wie transitionend den Zeitpunkt des Unmountens bestimmt, und eine wiederverwendbare Transition-Komponente erstellt.

Außerdem haben Sie gesehen, wann Sie statt einer eigenen Lösung react-transition-group verwenden sollten.