ReactJS - Animation: Bringing Your Components to Life

Hallo zusammen, zukünftige React-Animation-Zauberer! Ich freue mich sehr, Ihr Guide auf dieser aufregenden Reise in die Welt der ReactJS-Animationen zu sein. Als jemand, der seit Jahren Informatik unterrichtet, kann ich Ihnen sagen, dass Animationen wie das geheime Gewürz sind, das Ihre Anwendungen nicht nur funktional, sondern auch richtige Freude bereitet. Also tauchen wir ein und lassen die Komponenten tanzen!

Die Magie von React Transition Group

Bevor wir mit Animationen jonglieren, lassen Sie uns verstehen, was die React Transition Group ist. Denken Sie daran als eine Werkzeugkiste voller nützlicher Gadgets, die uns helfen, flüssige, augenzwinkernde Übergänge in unseren React-Anwendungen zu erstellen.

Installation von React Transition Group

Zuerst einmal müssen wir die React Transition Group zu unserer Projektfeier einladen. Öffnen Sie Ihr Terminal und tippen Sie:

npm install react-transition-group

oder wenn Sie ein Yarn-Fan sind:

yarn add react-transition-group

Großartig! Jetzt haben wir unsere Animationssuperkräfte an den Fingerspitzen.

Transition: Der Baustein von Animationen

Das Transition-Komponente ist wie das Fundament eines Hauses. Es gibt uns einen festen Grund, auf dem wir unsere Animationen aufbauen können. Sehen wir es in Aktion mit einem einfachen Beispiel:

import React, { useState } from 'react';
import { Transition } from 'react-transition-group';

const duration = 300;

const defaultStyle = {
transition: `opacity ${duration}ms ease-in-out`,
opacity: 0,
}

const transitionStyles = {
entering: { opacity: 1 },
entered:  { opacity: 1 },
exiting:  { opacity: 0 },
exited:  { opacity: 0 },
};

const FadeInOut = () => {
const [inProp, setInProp] = useState(false);

return (
<div>
<Transition in={inProp} timeout={duration}>
{state => (
<div style={{
...defaultStyle,
...transitionStyles[state]
}}>
Ich bin ein flackernder Text!
</div>
)}
</Transition>
<button onClick={() => setInProp(!inProp)}>
Klicken, um zu blenden
</button>
</div>
);
};

Lassen Sie uns das auseinandernehmen:

1. Wir importieren Transition von 'react-transition-group'.
2. Wir richten einige Stile ein: einen defaultStyle für unseren Ausgangszustand und transitionStyles für verschiedene Phasen des Übergangs.
3. Unsere FadeInOut-Komponente verwendet einen Zustand inProp, um die Sichtbarkeit zu steuern.
4. Das Transition-Komponente nimmt zwei Hauptargumente: in (unser Sichtbarkeitszustand) und timeout (Dauer der Animation).
5. Innen Transition verwenden wir eine Funktion, die den aktuellen Übergangsstatus erhält und den entsprechenden Stil anwendet.

Wenn Sie auf die Schaltfläche klicken, werden Sie sehen, dass der Text fließend ein- und ausblendet. Magie, oder?

CSSTransition: Wenn CSS auf React trifft

Nun, lassen Sie uns unser Spiel mit CSSTransition aufrüsten. Es ist wie das coolere Geschwisterchen von Transition, das nahtlos mit CSS-Klassen zusammenarbeitet. Hier ist ein spaßiges Beispiel:

import React, { useState } from 'react';
import { CSSTransition } from 'react-transition-group';
import './styles.css'; // Wir werden das in einem Moment erstellen

const Superhero = () => {
const [inProp, setInProp] = useState(false);

return (
<div>
<CSSTransition in={inProp} timeout={300} classNames="super">
<div className="superhero">
Ich bin ein Superheld!
</div>
</CSSTransition>
<button onClick={() => setInProp(!inProp)}>
Transformieren!
</button>
</div>
);
};

Und hier ist unser CSS (in styles.css):

.superhero {
background-color: #f0f0f0;
padding: 20px;
border-radius: 5px;
}

.super-enter {
opacity: 0;
transform: scale(0.9);
}
.super-enter-active {
opacity: 1;
transform: translateX(0);
transition: opacity 300ms, transform 300ms;
}
.super-exit {
opacity: 1;
}
.super-exit-active {
opacity: 0;
transform: scale(0.9);
transition: opacity 300ms, transform 300ms;
}

Hier ist, was passiert:

1. Wir verwenden CSSTransition anstelle von Transition.
2. Wir geben classNames="super" an, was React anweist, Klassen wie super-enter, super-enter-active usw. zu verwenden.
3. Unser CSS definiert, wie das Komponente in jeder Phase des Übergangs aussehen sollte.

Wenn Sie auf "Transformieren!" klicken, wird unser Superheld dramatisch erscheinen und verschwinden mit einer Skaleneffekt. Es ist wie ein Superheldenfilm, aber in Ihrem Browser!

TransitionGroup: Verwaltung mehrerer Übergänge

Last but not least, lassen Sie uns über TransitionGroup sprechen. Es ist wie ein Dirigent in einem Orchester, der mehrere Übergänge gleichzeitig manages. Hier ist ein praktisches Beispiel:

import React, { useState } from 'react';
import { CSSTransition, TransitionGroup } from 'react-transition-group';
import './list-styles.css';

const TodoList = () => {
const [items, setItems] = useState([]);
const [inputValue, setInputValue] = useState('');

const addItem = () => {
setItems([...items, { id: Date.now(), text: inputValue }]);
setInputValue('');
};

const removeItem = (id) => {
setItems(items.filter(item => item.id !== id));
};

return (
<div>
<input
value={inputValue}
onChange={(e) => setInputValue(e.target.value)}
placeholder="Geben Sie eine Aufgabe ein"
/>
<button onClick={addItem}>Hinzufügen</button>
<TransitionGroup className="todo-list">
{items.map(({ id, text }) => (
<CSSTransition
key={id}
timeout={500}
classNames="item"
>
<div className="todo-item">
{text}
<button onClick={() => removeItem(id)}>X</button>
</div>
</CSSTransition>
))}
</TransitionGroup>
</div>
);
};

Und die entsprechenden CSS (list-styles.css):

.todo-list {
list-style-type: none;
padding: 0;
}

.todo-item {
background-color: #f9f9f9;
border: 1px solid #ddd;
padding: 10px;
margin-bottom: 10px;
display: flex;
justify-content: space-between;
}

.item-enter {
opacity: 0;
}
.item-enter-active {
opacity: 1;
transition: opacity 500ms ease-in;
}
.item-exit {
opacity: 1;
}
.item-exit-active {
opacity: 0;
transition: opacity 500ms ease-in;
}

Dieses Beispiel erstellt eine einfache To-Do-Liste, bei der Elemente ein- und ausblenden, wenn sie hinzugefügt oder entfernt werden. Hier ist die Aufschlüsselung:

1. Wir verwenden TransitionGroup, um unsere Liste von Elementen zu umwickeln.
2. Jedes Element wird in CSSTransition gewickelt.
3. Wenn Elemente hinzugefügt oder entfernt werden, verwaltet TransitionGroup die Übergänge automatisch.

Das Ergebnis? Eine glatte, professionell aussehende To-Do-Liste, die jeden Projektleiter stolz machen würde!

Abschluss

Und da haben Sie es, Leute! Wir haben die Welt der React-Animationen durchquert, von der grundlegenden Transition bis zum mächtigen TransitionGroup. Denken Sie daran, Animationen sind nicht nur dazu da, Dinge hübsch aussehen zu lassen (obwohl das ein toller Bonus ist). Sie sind dazu da, intuitive, reaktive Schnittstellen zu schaffen, die Ihre Benutzer durch Ihre Anwendung führen.

Hier ist eine schnelle Referenztabelle der Methoden, die wir behandelt haben:

Komponente	Verwendungszweck	Wichtige Props
Transition	Grundlegende Übergänge	in, timeout
CSSTransition	CSS-basierte Übergänge	in, timeout, classNames
TransitionGroup	Verwaltung mehrerer Übergänge	component (optional)

Nun, gehen Sie hin und animieren Sie! Und denken Sie daran, mit großer Macht kommt große Verantwortung. Verwenden Sie Animationen weise, und Ihre Benutzer werden Ihnen danken. Frohes Coden!

Credits: Image by storyset