Introdução a Animações no React

Portuguese (Português) translation by Erick Patrick (you can also view the original English article)

Nos últimos tutoriais sobre React, familiarizamo-nos com os conceitos básicos do React, como JSX, rotas e formulários. Hoje, avançaremos e tentaremos entender animações no React.

Começando

Criemos um diretório chamado ReactAnimations. Naveguemos até o diretório e iniciemos o projeto usando npm.

1	mkdir ReactAnimations
2	cd ReactAnimations
3	npm init

Instalemos react e react-dom no projeto.

1	npm install react react-dom --save

Usaremos o empacotador de módulos webpack. Instalemo-no e o seu servidor de desenvolvimento.

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

Instalemos babel para converter a sintaxe JSX em JavaScript.

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

Criemos a configuração requerida pelo webpack-dev-server, onde feiniremos o arquivo de entrada, o de saída e o carregador do babel. Eis como webpack.config.js parece:

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

Criemos um index.html onde a aplicação será renderizada. Eis como ele parece:

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

Criemos um arquivo chamado app.js. Dentro dele, importemos as bibliotecas react necessárias, assim:

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

Criemos um componente sem estado, Home, que renderizará a tag H1.

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

Renderizemos o componente Home dentro do elemento app no index.html. Eis como o app.js se parece:

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

Salvemos e iniciemos o servidor webpack. Devemos ter um app rodando em http://localhost:8080/index.html.

Animações em React

React provê um número de complementos para criar apps nele. TransitionGroup e CSSTransitionGroup são as APIs providas para animação.

Da documentação oficial:

O complemento ReactTransitionGroup é uma API de baixo nível para animação, e ReactCSSTransitionGroup é um complemento para implementação básica fácil de animações e transições CSS.

Animação de Aparecer

Comecemos com uma animação simples em React. Instalemos react-addons-css-transition-group no projeto.

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

Importemos ReactCSSTransitionGroup dentro de app.js.

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

Dentro do componente Home que criamos, envolvamos a tag H2 dentro da tag ReactCSSTransitionGroup.

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

Usando a tag ReactCSSTransitionGroup, definimos a porção onde a animação acontecerá. Especificamos um nome para a transição usando transitionName. Também definimos onde a transição deverá aparecer, entrar e sair, ou não.

Usando o nome de transição definido em ReactCSSTransitionGroup, definimos as classes CSS que serão executadas ao aparecer e no estado ativo. Adicionemos o estilo CSS abaixo a index.html.

.anim-appear {
  opacity: 0.01;
}

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

Como percebemos, precisamos especificar a duração da animação tanto na renderização quanto no CSS. É assim que o React sabe quando remover as classes de animação do elemento e quando remover o elemento da DOM.

Salvemos as mudanças acima e atualizemos. Uma vez carregada, dentro de alguns segundos deveremos ver o texto animado.

Animação de Entrar/Sair

Para entender melhor a animação de entrar e sair, criaremos uma outra pequena aplicação React. O app terá uma caixa de texto para digitar um nome. eremos como adicionar a animação de entrar quando o nome é adiciona à lista.

Dentro de app.js, criemos uma nova classe chamada App.

1	class App extends React.Component {
2
3	}

Inicializemos a lista data e a variável name dentro do estado inicial do componente.

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

Dentro da parte de renderização do componente App, posicionemos uma caixa de texto para digitar o nome e um botão para adicionar o botão à lista de vetor.

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

Definamos os eventos handleChange e add do campo, dentro do componente App.

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

O evento handleChange configura o valor do campo de texto igual ao valor de name. Eis como o método add funciona:

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

Dentro de add, o nome digitado e um ID único é passado para a lista de vetor data.

Vinculemos handleChange e add ao construtor do componente App.

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

Mostraremos os nomes digitados em um lista. Modifiquemos o HTML renderizado para adicionar a lista.

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

Para animar os items recém adicionados, adicionaremos a tag ReactCSSTransitionGroup sobre os 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>

Adicionemos o estilo de transição CSS à página index.html.

.anim-enter {
  opacity: 0.01;
}

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

Eis o componente 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>
    )
  }
}

Salvemos e atualizemos a página. Digitemos um nome e apertemos o botão add, e o item deverá aparecer na lista com animação.

Similarmente, a animação de sair também pode ser implementada no código acima. Após a funcionalidade ser implementada na aplicação, adicionemos as classes leave e leave-active ao index.html. Configuremos transitionLeave=True na tag ReactCSSTransitionGroup de render e tudo deve estar ok.

Conclusão

Nesse tutorial, vimos como começar a usar animações em React. Criamos um app simples em React e vimos como implementar animações para aparecer e entrar. Para informações em detalhes sobre animações em React, recomendamos a documentação oficial.

O código fonte desse tutorial está disponível no GitHub.

No último ano, React cresceu em popularidade. Na verdade, temos vários itens no mercado, disponíveis para compra, resenha, implementação e etc. Assim, para mais recurso sobre React, não deixe de conferi-los.

Diga-nos o que acho nos comentários abaixo. Veja a página de instrutor na Envato Tuts+ para mais tutoriais sobre React e tecnologia web correlatas.