Wie animiere ich eine Komponente mit Reactjs?

Um eine Komponente in Reactjs zu animieren, können Sie die React Transition Group und CSS-Animationen verwenden oder Sie können externe Bibliotheken wie react-motion oder react-transition-group verwenden.

Hier ist ein einfaches Beispiel dafür, wie Sie die React Transition Group verwenden können:

1. Einführen Sie die Bibliotheken in Ihrer Datei.

```js
import React from ‘react’;
import { CSSTransitionGroup } from ‘react-transition-group‘
```

2. Erstellen Sie eine Komponente, die Sie dann animieren möchten.

```js
class MeinComponent extends React.Component { constructor(props) { super(props); this.state = { items: [‘item1’, ‘item2’, ‘item3’] }; this.handleAdd = this.handleAdd.bind(this); }

handleAdd() { const newItems = this.state.items.concat([ prompt(‘Enter some text’) ]); this.setState({ items: newItems }); } render() { const items = this.state.items.map((item, i) => (

{item}

)); return (

{items}

); } } ```

3. Definieren Sie nun die CSS-Animationen.

```css
.example-enter { opacity: 0.01;
}

.example-enter.example-enter-active { opacity: 1; transition: opacity 500ms ease-in;
}

.example-leave { opacity: 1;
}

.example-leave.example-leave-active { opacity: 0.01; transition: opacity 300ms ease-in;
}
```

In diesem Beispiel fügen Sie CSSTransitionGroup um die Elemente, die Sie animieren möchten. Es nimmt dann die CSS-Klassen vom `transitionName` prop und wendet sie in verschiedenen Transition-Phasen an.

Installieren Sie react-transition-group, wenn Sie es noch nicht installiert haben, indem Sie diesen Befehl in Ihre Konsole eingeben:

```shell
npm install react-transition-group —save
```

Weitere Informationen und ein detaillierteres Lernprogramm finden Sie in der offiziellen Dokumentation: https://reactcommunity.org/react-transition-group/