Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. React

Introducción a Animaciones en React

by
Read Time:6 minsLanguages:

Spanish (Español) translation by Rafael Chavarría (you can also view the original English article)

En el último par de tutoriales React, te familiarizaste con conceptos React básicos como JSX, ruteo, y formularios. En este tutorial, lo llevaremos al siguiente nivel e intentaremos entender animaciones en React.

Comenzando

Crea un directorio llamado ReactAnimations. Navega al directorio e inicia el proyecto usando Node Package Manager o npm.

Instala react y react-dom al proyecto.

Estaremos usando el agrupador de módulo webpack para este proyecto. Instala webpack y webpack development server.

Instala el paquete babel para convertir sintáxis JSX a JavaScript en nuestro proyecto.

Crea un archivo de configuración requerido por webpack-dev-server en donde definiremos el archivo de entrada, y el cargador babel. Aquí está como luce webpack.config.js:

Crea un archivo index.html en donde la aplicación será generada. Aquí está cómo luce:

Crea un archivo llamado app.js. Dentro de app.js importa las librerías react requeridas como se muestra:

Crea un componente sin estado llamado Home que genere una etiqueta H1.

Genera el componente Home dentro del elemento app en la página index.html. Aquí está como luce app.js.

Guarda los cambios de arriba y comienza el servidor webpack. Deberías tener tu app ejecutándose en http://localhost:8080/index.html.

Animaciones en React

React proporciona un número de utilidades complementarias para crear apps React. TransitionGroupCSSTransitionGroup son las APIs provistas para animación.

Desde la documentación oficial,

El componente complementario ReactTransitionGroup es una API de bajo nivel para animación, y ReactCSSTransitionGroup es un componente complementario para implementar fácilmente animaciones CSS básicas y transiciones.

Animación Aparecer

Comencemos probando una animación simple en React. Instala react-addons-css-transition-group al proyecto.

Importa ReactCSSTransitionGroup dentro del archivo app.js.

Dentro del componente Home que creaste, envuelve la etiqueta h2 dentro de la etiqueta ReactCSSTransitionGroup.

Usando la etiqueta ReactCSSTransitionGroup, has definido la porción en donde la animación tomará lugar. Has especificado un nombre para la transición usando transitionName. También has definido si la transición aparecer, entrar o salir deberían suceder o no.

Usando el nombre de transición definido dentro de ReactCSSTransitionGroup, definirás las clases CSS que serían ejecutadas en aparecer y cuando está en un estado activo. Agrega el siguiente estilo CSS a la página index.html.

Como habrás notado, necesitas especificar la duración de la animación tanto en el método de generación como en el CSS. Es porque así es como React sabe cuando quitar las clases de animación del elemento y cuándo quitar el elemento del DOM.

Guarda los cambios de arriba y refresca la página. Una vez que el cambio ha cargado, dentro de unos pocos segundos deberías poder ver el texto animado.

Animación Entrar/Salir

Para tener un mejor entendimiento de la animación entrar y salir, crearemos una pequeña aplicación React. La app tendrá una caja de entrada de texto para ingresar el nombre. Verás cómo agregar la animación entrar cuando un nombre es agregado a la lista.

Dentro de app.js, crea una nueva clase llamada App.

Inicializa una lista data y una variable name dentro del estado inicial del componente.

Dentro de la porción de generación del componente app, coloca una caja de ingreso de texto para ingresar el nombre y un botón para agregar el nombre a la lista de arreglo.

Define la el evento de entrada handleChange y el evento add dentro del componente App.

El evento handleChange establece el valor de la caja de entrada de texto a la variable name. Aquí está cómo se ve el método add:

Dentro del método add, el nombre ingresado y un ID único son empujados a la lista de arreglo data.

Enlaza los métodos handleChange y add en el constructor del componente de la App.

Estarás mostrando los nombres ingresados dentro de una lista. Modifica el código de generación HTML para agregar la lista.

Para animar los elementos recién agregados, agregaremos la etiqueta ReactCSSTransitionGroup sobre los elementos li.

Agrega el siguiente estilo de transición CSS a la página index.html.

Aquí está el componente de la App completo:

Guarda lo anterior y refresca la página. Ingresa un nombre e ingresa el botón agregar, y en el elemento debería ser agregado a la lista con animación.

De manera similar, la animación salir también puede ser implementada en el código de arriba. Una vez que la funcionalidad borrar haya sido implementada en la aplicación, agrega las clases leave y leave-active al index.html. Establece transitionLeave a True en la etiqueta ReactCSSTransitionGroup en el método de generación, y deberías estar listo.

Concluyendo

En este tutorial, viste como comenzar usando animaciones en React. Creaste una simple aplicación React y viste cómo implementar las animaciones aparecer y entrar. Para información a fondo sobre animaciones en React, recomendaría leer la documentación oficial.

El código fuente de este tutorial está disponible en GitHub.

Durante los dos últimos años, React ha crecido en popularidad. De hecho, tenemos una cantidad de elementos en el marketplace que están disponibles para compra, revisión, implementación, etc. Si estás buscando recursos adicionales alrededor de React, no dudes en revisarlos.

Déjanos saber tus ideas en los comentarios de abajo. Echa un vistazo a mi página de instructor Envato Tuts+ para más tutoriales sobre React y tecnologías web relacionadas.

Advertisement
Did you find this post useful?
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.