Introducción a Animaciones en React

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.

1	mkdir ReactAnimations
2	cd ReactAnimations
3	npm init

Instala react y react-dom al proyecto.

1	npm install react react-dom --save

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

1	npm install webpack webpack-dev-server --save-dev

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

1	npm install --save-dev babel-core babel-loader babel-preset-react babel-preset-es2015

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:

module.exports = {
    entry: './app.js',
    module: {
        loaders: [
            {
                exclude: /node_modules/,
                loader: 'babel-loader?presets[]=es2015&presets[]=react'
            }
        ]
    },
    output: {
        filename: 'bundle.js'
    }
};

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

<html>
    <head>
        <title>TutsPlus - React Animations</title>
    </head>
    <body>
        <div id="app"></div>
        <script src="bundle.js"></script>
    </body>
</html>

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

1	import React from 'react';
2	import {render} from 'react-dom';

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

const Home = () => {
    return (
        <h2>{'TutsPlus - Welcome to React Animations!'}</h2>
    );
};

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

import React from 'react';
import {render} from 'react-dom';
 
const Home = () => {
    return (
        <h2>{'TutsPlus - Welcome to React Animations'}</h2>
    );
};
 
render(
    <Home />,
    document.getElementById('app')
);

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. TransitionGroup y CSSTransitionGroup 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.

1	npm install react-addons-css-transition-group --save

Importa ReactCSSTransitionGroup dentro del archivo app.js.

1	import ReactCSSTransitionGroup from 'react-addons-css-transition-group'

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

<div>
    <ReactCSSTransitionGroup transitionName="anim" transitionAppear={true} transitionAppearTimeout={5000} transitionEnter={false} transitionLeave={false}>
        <h2>{'TutsPlus - Welcome to React Animations'}</h2>
    </ReactCSSTransitionGroup>
</div>

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.

.anim-appear {
  opacity: 0.01;
}

.anim-appear.anim-appear-active{
  opacity: 2;
  transition: opacity 5s ease-in;
}

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.

1	class App extends React.Component {
2
3	}

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

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: [],
      name:''
    };
  }
}

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.

1	<div>
2	Enter Name <input onChange={this.handleChange} type="text" /> <input onClick={this.add} type="button" value="Add" />
3	</div>

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

1	handleChange(e){
2	this.setState({name:e.target.value})
3	}

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:

add(){
    var arr = this.state.data.slice();
    arr.push({'id':(new Date()).getTime(),'name':this.state.name})
    this.setState({data:arr})
}

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.

constructor(props) {
    super(props);
    this.add = this.add.bind(this);
    this.handleChange = this.handleChange.bind(this);
    this.state = {
      data: [],
      name:''
    };
}

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

<ul>
{
    this.state.data.map(function(player) {
         return <li key={player.id}>{player.name}</li>
    })
}
</ul>

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

<ul>
    <ReactCSSTransitionGroup transitionName="anim" transitionAppear={false} transitionEnterTimeout={5000} transitionEnter={true} transitionLeave={false}>
    {
      this.state.data.map(function(player) {
         return <li key={player.id}>{player.name}</li>
      })
    }
    </ReactCSSTransitionGroup>
</ul>

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

.anim-enter {
  opacity: 0.01;
}

.anim-enter.anim-enter-active {
  opacity: 2;
  transition: opacity 5s ease-in;
}

Aquí está el componente de la App completo:

class App extends React.Component {
  constructor(props) {
    super(props);
    this.add = this.add.bind(this);
    this.handleChange = this.handleChange.bind(this);
    this.state = {
      data: [],
      name:''
    };
  }
  add(){
    var arr = this.state.data.slice();
    arr.push({'id':(new Date()).getTime(),'name':this.state.name})
    this.setState({data:arr})
  }
  handleChange(e){
    this.setState({name:e.target.value})
  }
  render() {
    return (
      <div>
        Enter Name <input onChange={this.handleChange} type="text" /> <input onClick={this.add} type="button" value="Add" />
        
        <ul>
        <ReactCSSTransitionGroup transitionName="anim" transitionAppear={false} transitionEnterTimeout={3000} transitionEnter={true} transitionLeave={false}>
        {
          this.state.data.map(function(player) {
             return <li key={player.id}>{player.name}</li>
          })
        }
        </ReactCSSTransitionGroup>
        </ul>
        
      </div>
    )
  }
}

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.