ReactJS - Animation: Apporter Vie à Vos Composants

Salut à toi, futurs magiciens de l'animation React ! Je suis ravi de vous guider sur ce voyage passionnant dans le monde des animations ReactJS. En tant que quelqu'un qui enseigne l'informatique depuis des années, je peux vous dire que les animations sont comme la sauce secrète qui rend vos applications non seulement fonctionnelles, mais carrément délicieuses. Alors, plongeon dans l'eau et faisons danser nos composants !

La Magie du Groupe de Transitions React

Avant de commencer à jongler avec les animations, comprenons ce qu'est le React Transition Group. Pensez-y comme une boîte à outils remplie de gadgets ingénieux qui nous aident à créer des transitions fluides et accrocheuses dans nos applications React.

Installer le Groupe de Transitions React

Premierement, nous devons inviter le React Transition Group à notre fête de projet. Ouvrez votre terminal et tapez :

npm install react-transition-group

ou si vous êtes fan de yarn :

yarn add react-transition-group

Super ! Maintenant, nous avons nos superpuissances d'animation à portée de main.

Transition : La Pierre Angulaire des Animations

Le composant Transition est comme la fondation d'une maison. Il nous donne une base solide pour construire nos animations. Voyons-le en action avec un exemple simple :

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]
}}>
Je suis un texte qui s'estompe !
</div>
)}
</Transition>
<button onClick={() => setInProp(!inProp)}>
Cliquez pour Effacer
</button>
</div>
);
};

Décomposons cela :

1. Nous importons Transition depuis 'react-transition-group'.
2. Nous configurons quelques styles : un defaultStyle pour notre état initial, et transitionStyles pour différentes phases de la transition.
3. Notre composant FadeInOut utilise un état inProp pour contrôler la visibilité.
4. Le composant Transition prend deux propriétés principales : in (notre état de visibilité) et timeout (durée de l'animation).
5. À l'intérieur de Transition, nous utilisons une fonction qui reçoit l'état de transition actuel et applique le style approprié.

Lorsque vous cliquez sur le bouton, vous verrez le texte apparaître et disparaître en douceur. Magique, n'est-ce pas ?

CSSTransition : Quand CSS Rencontre React

Maintenant, levons notre jeu avec CSSTransition. C'est comme le frère plus cool de Transition qui fonctionne parfaitement avec les classes CSS. Voici un exemple amusant :

import React, { useState } from 'react';
import { CSSTransition } from 'react-transition-group';
import './styles.css'; // Nous créerons cela dans un moment

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

return (
<div>
<CSSTransition in={inProp} timeout={300} classNames="super">
<div className="superhero">
Je suis un Superhéros !
</div>
</CSSTransition>
<button onClick={() => setInProp(!inProp)}>
Transformer !
</button>
</div>
);
};

Et voici notre CSS (dans 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;
}

Voici ce qui se passe :

1. Nous utilisons CSSTransition au lieu de Transition.
2. Nous spécifions classNames="super", ce qui indique à React d'utiliser des classes comme super-enter, super-enter-active, etc.
3. Notre CSS définit comment le composant doit paraître à chaque phase de la transition.

Lorsque vous cliquez sur "Transformer !", notre superhéros apparaîtra et disparaîtra avec un effet de zoom. C'est comme regarder un film de superhéros, mais dans votre navigateur !

TransitionGroup : Gérer Plusieurs Transitions

Pour finir, parlons de TransitionGroup. C'est comme un chef d'orchestre dans un orchestre, gérant plusieurs transitions à la fois. Voici un exemple pratique :

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="Entrez une tâche"
/>
<button onClick={addItem}>Ajouter</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>
);
};

Et le CSS correspondant (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;
}

Cet exemple crée une liste de tâches simple où les éléments apparaissent en fondu lorsque vous les ajoutez et disparaissent en fondu lorsque vous les supprimez. Voici le détail :

1. Nous utilisons TransitionGroup pour envelopper notre liste d'items.
2. Chaque item est enveloppé dans un CSSTransition.
3. Lorsque des items sont ajoutés ou supprimés, TransitionGroup gère les transitions automatiquement.

Résultat ? Une liste de tâches fluide et professionnelle qui ferait la fierté de tout chef de projet !

Conclusion

Et voilà, les amis ! Nous avons parcouru le pays des animations React, du simple Transition au puissant TransitionGroup. Souvenez-vous, les animations ne sont pas seulement là pour rendre les choses jolies (quoique c'est un bonus incroyable). Elles sont là pour créer des interfaces intuitives et réactives qui guident vos utilisateurs à travers votre application.

Voici un tableau de référence rapide des méthodes que nous avons couvertes :

Composant	Cas d'Utilisation	Propriétés Clés
Transition	Transitions de base	in, timeout
CSSTransition	Transitions basées sur CSS	in, timeout, classNames
TransitionGroup	Gérer plusieurs transitions	component (optionnel)

Maintenant, allaitez et animez ! Et souvenez-vous, avec grand pouvoir vient une grande responsabilité. Utilisez les animations avec sagesse, et vos utilisateurs vous en remercieront. Bon codage !

Credits: Image by storyset