Si bien React administra diferentes componentes y su comportamiento para hacer que cualquier aplicación web sea interactiva, no contiene una metodología para agregar estética a la aplicación en sí. La animación se considera uno de los métodos más utilizados para agregar estética a una aplicación, podemos agregar animación a una aplicación React usando un grupo explícito de componentes conocido como React Transition Group .
Los desarrolladores del Transition Group lo definen como,
Un conjunto de componentes para administrar los estados de los componentes (incluido el montaje y desmontaje) a lo largo del tiempo, diseñado específicamente con la animación en mente.
Puede mejorar la interfaz de usuario usando React Transition Group para eso:
- En la versión de Node de su máquina, debe instalarse> = 6
- npm debe estar instalado en su máquina.
Puede instalar el grupo de transición en el componente de su proyecto usando el comando:
npm install react-transition-group --save
Puede importar el componente de transición en el componente del proyecto usando el comando:
import { Transition } from 'react-transition-group';
Puntos importantes a tener en cuenta:
- La animación que podemos implementar usando React Transition Group es puramente CSS Transitions , es decir, no usa ninguna propiedad de JavaScript para animar los componentes. Las animaciones se logran definiendo clases con diferentes estilos CSS y equipando y desequipando las clases en puntos específicos del ciclo de vida del componente.
- React estaba destinado a ser utilizado para crear aplicaciones web y los desarrolladores pensaron que sería mejor separar las otras funciones adicionales, como las animaciones, para mantener el peso ligero de React. Por lo tanto, para usar el Grupo de transición, necesitaremos instalarlo por separado, lo cual trataremos más adelante en este artículo.
- El grupo React Transition consta de tres componentes principales Transition , CSSTransition y TransitionGroup . Daremos un breve vistazo a cada uno de ellos más adelante en este artículo e implementaremos el componente CSSTransition debido a su popularidad.
- React Transition Group consta solo de componentes, es decir, para implementar animación en cualquier conjunto de componentes o elementos HTML, primero debemos envolverlos dentro de cualquiera de los tres componentes existentes.
- Finalmente, comprendamos cómo funciona el Grupo de Transición. Los componentes de React Transition Group dividen el ciclo de vida de cualquier otro componente secundario en etapas específicas y los desarrolladores pueden optar por agregar clases específicas en estas etapas durante un período de tiempo conocido como Timeout . Aquí es donde termina el uso de JavaScript. Ahora todo queda para que el desarrollador dé diferentes estilos a las clases y agregue Transiciones CSS para la animación.
Componentes del grupo de transición React:
Como discutimos anteriormente, el grupo React Transition consta de tres componentes principales Transition , CSSTransition y TransitionGroup . Describamos ahora brevemente lo siguiente.
- Transición : el componente de transición tiene una API simple que permite al desarrollador describir una transición de un estado de componente a otro a lo largo del tiempo. Principalmente se usa para animar el montaje y desmontaje de un componente, pero también se puede usar para crear animaciones más complejas.
De acuerdo con el Componente de Transición, una Transición se puede dividir en Cuatro Etapas Principales:- entrando
- ingresó
- saliendo
- salió
- CSSTransition : como sugiere el nombre, este componente de transición se basa en transiciones y animaciones CSS. Está inspirado en la biblioteca ng-animate . De acuerdo con el componente CSSTransition, una transición se puede dividir en tres etapas principales:
- Aparecer
- ingresar
- salida
- TransitionGroup : el componente TransitionGroup se usa para administrar un conjunto de componentes de transición en una lista. Similar al componente de transición en sí, TransitionGroup no configura directamente las animaciones, es una máquina de estado, ya que realiza un seguimiento del estado actual del componente. está en, es decir, montar o desmontar.
El componente TransitionGroup se usa principalmente para tener diferentes animaciones dentro de un componente, esto se puede lograr envolviendo varios componentes de transición dentro de un componente TransitionGroup. Un TransitionGroup puede contener cualquiera de los componentes disponibles. Se discutirá más sobre el componente TransitionGroup en artículos futuros.
- Ahora que hemos aprendido qué es React Transition Group y cuáles son sus componentes. Deberíamos tomar cada uno de los componentes y verlos en detalle junto con algunos ejemplos. Finalmente, crearemos una aplicación muy simple para resumir lo que aprendimos.
Referencias: