Il existe plusieurs façons d’utiliser les animations CSS dans ReactJS. En voici quelques-unes:
1. Inline styles: Vous pouvez utiliser le style inline pour ajouter des animations à vos composants ReactJS.
Exemple:
```
import React from ‘react’;
const MyComponent = () => (
1. CSS Modules: Vous pouvez utiliser CSS Modules pour ajouter des animations à vos composants. Avec CSS Modules, vous pouvez écrire du CSS normal et l’importer directement dans votre composant.
Exemple:
```
//styles.module.css
@keyframes my_animation {
0% {opacity: 0}
100% {opacity: 1}
}
.animate {
animation: my_animation 2s;
}
//MyComponent.js
import React from ‘react’;
import styles from ‘./styles.module.css’;
const MyComponent = () => (
1. Styled-components: La bibliothèque styled-components permet également d’ajouter des animations CSS à vos composants ReactJS.
Exemple:
```
import React from ‘react’;
import styled, { keyframes } from ‘styled-components’;
const fadeIn = keyframes`
0% {
opacity: 0;
}
100% {
opacity: 1;
}
`;
const AnimatedDiv = styled.div`
animation: 2s ${fadeIn} infinite;
`;
const MyComponent = () => (
);
export default MyComponent;
```
1. React Transition Group: Il s’agit d’une bibliothèque qui peut être utilisée pour créer des animations de transition de base lors de l’ajout ou de la suppression d’un élément de l’interface utilisateur.
Exemple:
```
import React from ‘react’;
import { CSSTransition } from ‘react-transition-group’;
const MyComponent = () => (
Hello, World!
);
export default MyComponent;
```
Rappelez-vous, lorsque vous utilisez des animations CSS dans ReactJS, vous devez penser à la lisibilité de votre code et à la performance de votre application.
