Wie verwende ich Gruppenübergänge in Reactjs?

Gruppenübergänge in Reactjs können dazu verwendet werden, um bei Änderungen im DOM flüssige Animationen und Übergänge zu erstellen. Dies kann besonders hilfreich sein, wenn Elemente hinzugefügt oder entfernt werden und Sie möchten, dass dies auf ästhetisch ansprechende Weise geschieht.

React Transition Group ist ein Paket, das Animationen in React beim Hinzufügen oder Entfernen von Komponenten ermöglicht. Hier ist ein einfaches Beispiel, wie Sie es verwenden könnten:

1. Installieren Sie zuerst das Paket in Ihrem Projekt: ``` npm install react-transition-group ```

2. Importieren Sie es in Ihrer Komponente: ```javascript import { TransitionGroup, CSSTransition } from ‘react-transition-group’; ```

3. Umfassen Sie Ihre Elemente mit den `TransitionGroup` und `CSSTransition` Komponenten:

```javascript {items.map(item => (

{item.text}

))} ``` In diesem Codefetzen wird `TransitionGroup` als Wrapper um eine Liste von Items verwendet. Jedes Item ist umgeben von einer `CSSTransition` Komponente, die eine Animation auslösen wird, wenn das Item hinzugefügt oder entfernt wird.

Der `classNames` Prop definiert den Namen der CSS-Klassen, die für die Ein- und Austritts-Animationen angehängt werden. So können Sie eine `.item-enter` und `.item-exit` CSS-Klasse in Ihrer Stylesheet-Datei definieren.

Der `timeout` Prop bestimmt die Dauer der Animation in Millisekunden.

Denken Sie daran, dass Sie für jede Komponente, die Sie in einem `CSSTransition` einwickeln, einen eindeutigen ‘key’ Prop bereitstellen müssen, damit React den Ein- und Austritt richtig verfolgen kann.

4. Nun definieren Sie die Transitions in Ihrer CSS:

```css .item-enter { opacity: 0; } .item-enter-active { opacity: 1; transition: opacity 500ms; } .item-exit { opacity: 1; } .item-exit-active { opacity: 0; transition: opacity 500ms; } ``` In diesem CSS-Code werden zwei Zustände für jedes Item definiert: ‘enter’ und ‘exit’. Jeder Zustand hat zwei Phasen: direkt am Anfang und aktiv. Am Anfang von ‘enter’ setzen wir die Opazität auf 0, und aktivieren es dann auf 1. Umgekehrt setzen wir am Anfang von ‘exit’ die Opazität auf 1 und aktivieren es auf 0.

Die tatsächliche Transition (wie die Animation durchgeführt wird) wird definiert in den aktiven Klassen mit einer Dauer von 500 Millisekunden.

5. Jetzt wird jedes hinzugefügte Element allmählich von transparent zu undurchsichtig übergehen und jedes entfernte Element wird allmählich von undurchsichtig zu transparent übergehen, was eine glatte Übergangseffekt bietet.

Denken Sie daran, dass die tatsächlichen Animationen, die Sie erstellen können, sehr vielfältig sind, abhängig von den CSS-Regeln, die Sie in den enter- und exit-Klassen anwenden.