CSS-Transitions bei Änderungen des React-Status

Eine CSS transition interpoliert eine Eigenschaft über einen Zeitraum gleichmäßig zwischen zwei Werten, statt sofort umzuschalten. Sie deklarieren sie am Element mit transition: property duration timing-function delay.

In React animieren Sie normalerweise keine Inline-Werte manuell. Stattdessen schalten Sie mithilfe des Zustands eine Klasse oder einen Stil um, und CSS übernimmt die Zwischenframes.

Das gängige Muster besteht darin, einen booleschen Wert in useState zu speichern und bei seiner Änderung eine CSS-Klasse auszutauschen. Ändert sich die Klasse, erhält die Zieleigenschaft einen neuen Wert, und CSS animiert den Unterschied.

Beispielsweise steuert isOpen, ob das Element die Klasse open besitzt, und die Klasse open legt eine andere Höhe oder Transformation fest.

Eine typische Einrichtung ist const [isVisible, setIsVisible] = useState(false). Ein Button ruft setIsVisible(v => !v) auf, um den Wert umzuschalten.

Der funktionale Updater v => !v verhindert veralteten Zustand, wenn mehrere Aktualisierungen gemeinsam in die Warteschlange gestellt werden, und hält das Umschalten zuverlässig.

Sie erstellen className dynamisch: className={'panel ' + (isVisible ? 'panel--shown' : 'panel--hidden')}. Die Basisklasse enthält die Transition-Deklaration, die Modifikatorklassen enthalten die Start- und Endwerte.

Wenn transition in der immer vorhandenen Basisklasse bleibt, läuft die Animation in beide Richtungen – beim Öffnen und Schließen.

Mehrere Eigenschaften können Sie gleichzeitig animieren, indem Sie sie auflisten: transition: transform 300ms ease, opacity 300ms ease. Ein Fade-and-Slide-Effekt kombiniert eine Änderung von opacity mit einem translateY in transform.

Das gleichzeitige Animieren erzeugt einen eleganten Eintritt, bei dem das Element nach oben gleitet und gleichzeitig eingeblendet wird.

transition-delay verzögert den Beginn einer Transition. Indem Sie Listenelementen zunehmend größere Verzögerungen geben, erzeugen Sie eine gestaffelte Kaskade, bei der jedes Element kurz nach dem vorherigen animiert wird.

In React können Sie die Verzögerung inline berechnen, zum Beispiel style={{ transitionDelay: index * 50 + 'ms' }}.

Die Eigenschaft display ist nicht animierbar, da es zwischen none und block keine Zwischenwerte gibt. Eine Transition dieser Eigenschaft führt zu einem sofortigen Sprung, nicht zu einem Ausblenden.

Stattdessen animieren Sie opacity für das visuelle Ein- bzw. Ausblenden und schalten pointer-events: none um, damit das ausgeblendete Element unsichtbar keine Klicks verarbeitet.

Die Timing-Funktion bestimmt, wie sich die Geschwindigkeit über die Dauer verändert. linear bewegt sich mit konstanter Geschwindigkeit, ease beginnt und endet langsam, und cubic-bezier(...) ermöglicht eine vollständig benutzerdefinierte Kurve.

Benutzerdefinierte Kurven eignen sich hervorragend für ein knackiges oder federndes Bewegungsgefühl, etwa cubic-bezier(0.34, 1.56, 0.64, 1) für ein leichtes Überschwingen.

Sie können Dauern in CSS-benutzerdefinierten Eigenschaften wie --speed: 300ms speichern und wiederverwenden: transition: opacity var(--speed) ease. So bleiben Zeitabläufe in allen Komponenten konsistent.

React kann die Variable sogar inline über style={{ '--speed': '500ms' }} setzen, sodass Props das Timing der Animation bestimmen.

Browser können transform und opacity im GPU-Compositor animieren, ohne das Layout neu zu berechnen oder neu zu zeichnen. Das Animieren von Eigenschaften wie width, top oder margin erzwingt dagegen in jedem Frame Layout-Arbeit und kann zu Ruckeln führen.

Wenn Sie etwas verschieben, skalieren oder drehen müssen, verwenden Sie transform; zum Ein- oder Ausblenden verwenden Sie opacity.

Eine zuverlässige Transition in React kombiniert einen booleschen Zustand, eine bedingte Modifikatorklasse und eine Basisklasse, die transition für GPU-freundliche Eigenschaften deklariert. Der Zustand ändert die Klasse, und CSS übernimmt die Animation.

Das hält Ihre Komponenten deklarativ und nutzt zugleich den Browser, um flüssige Bewegungen zu erzeugen.

Sie haben gelernt, CSS-Transitions durch das Umschalten zustandsabhängiger Klassen auszulösen, transform und opacity gemeinsam zu animieren, mit Verzögerungen zu staffeln und Transitionen von display zu vermeiden, indem Sie opacity zusammen mit pointer-events verwenden.

Außerdem haben Sie Timing-Funktionen und Dauern mit CSS-Variablen kennengelernt und gesehen, warum GPU-kompositierte Eigenschaften Bewegungen flüssig halten.