Las transiciones de grupo en React se utilizan principalmente para animar la adición o eliminación de elementos en una lista, donde una transición correspondiente ocurre cuando los elementos están ingresando o saliendo de la lista.
React-transition-group es un módulo comúnmente usado para hacer esto en React.
Aquí hay una guía básica de cómo usarlo:
1. Primero, instale react-transition-group en su proyecto utilizando el administrador de paquetes npm:
```bash
npm install react-transition-group
```
2. Importe el componente TransitionGroup y CSSTransition desde react-transition-group en su archivo JavaScript:
```jsx
import { TransitionGroup, CSSTransition } from ‘react-transition-group’;
```
3. A continuación, puede usar TransitionGroup para envolver los elementos que desee animar. El componente CSSTransition tiene props como ‘classNames’ para definir el nombre de las clases de animación, y ‘timeout’ para definir la duración de las transiciones:
```jsx
{items.map((item) => (
))}
```
4. Ahora, defina las clases de transición en su archivo CSS. Aquí, ‘fade’ es el nombre de la clase que hemos dado en las props de CSSTransition. Definiremos tres clases: ‘.fade-enter’, ‘.fade-enter-active’, ‘.fade-exit’, ‘.fade-exit-active’. Aquí, las clases ‘-enter’ son para la transición de entrada de un elemento y ‘-exit’ para la transición de salida de un elemento.
```css
.fade-enter {
opacity: 0;
}
.fade-enter-active {
opacity: 1;
transition: opacity 500ms;
}
.fade-exit {
opacity: 1;
}
.fade-exit-active {
opacity: 0;
transition: opacity 500ms;
}
```
Es esencial recordar que el paquete “react-transition-group” no crea animaciones por sí mismo. Es un conjunto de componentes que implementa la lógica necesaria para definir transiciones (entrando o saliendo) para componentes o elementos.
También puedes revisar la [documentación oficial de React Transition Group](https://reactcommunity.org/react-transition-group/) para más detalles y ejemplos.
