Introdução às animações em React

Nos últimos dois tutoriais do React, você se familiarizou com os conceitos básicos do React como JSX, roteamento e formulários. Neste tutorial, iremos para o próximo nível e tentaremos entender as animações no React.

Começando

Crie um diretório chamado ReactAnimations. Navegue até o diretório e inicie o projeto usando o Node Package Manager ou npm.

mkdir ReactAnimations
cd ReactAnimations
npm init

Instalar react e react-dom ao projeto.

npm install react react-dom  --save

Nós estaremos usando webpack empacotador de módulos para este projeto. Instalar webpack e servidor de desenvolvimento webpack.

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

Instale o babel pacote para converter JSX sintaxe para JavaScript em nosso projeto.

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

Crie um arquivo de configuração exigido por webpack-dev-server onde definiremos o arquivo de entrada, o arquivo de saída e o carregador babel. Aqui está como webpack.config.js parece:

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

Criar um index.html arquivo onde a aplicação será renderizada. Aqui está como parece:

Crie um arquivo chamado app.js. Dentro app.js importe as bibliotecas de reação necessárias, conforme mostrado:

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

Crie um componente sem estado chamado Home que rende um H1 marcação.

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

Renderize o componente Home dentro do elemento app no index.html página. Aqui está como app.js parece:

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

Salve as alterações acima e inicie o webpack servidor. Você deve ter seu aplicativo em execução em http://localhost:8080/index.html.

Animações em React

O React fornece vários utilitários complementares para criar aplicativos React. TransitionGroup e CSSTransitionGroup são as APIs fornecidas para animação.

A partir da documentação oficial,

o ReactTransitionGroup O componente complementar é uma API de baixo nível para animação e ReactCSSTransitionGroup é um componente adicional para implementar facilmente animações e transições CSS básicas.

Aparecer Animação

Vamos começar experimentando uma animação simples no React. Instale o react-addons-css-transition-group ao projeto.

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

Importar ReactCSSTransitionGroup dentro de app.js Arquivo.

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

Dentro de Home componente que você criou, encerre o h2 etiqueta dentro do ReactCSSTransitionGroup marcação.

    
        
{'TutsPlus - Welcome to React Animations'}
    

Usando o ReactCSSTransitionGroup tag, você definiu a parte onde a animação ocorreria. Você especificou um nome para a transição usando transitionName. Você também definiu se a transição aparecer, entrar e sair deve acontecer ou não.

Usando o nome de transição definido dentro do ReactCSSTransitionGroup, você definirá as classes CSS que seriam executadas ao aparecer e no estado ativo. Adicione o seguinte estilo CSS ao index.html página.

.anim-appear {
  opacity: 0.01;
}

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

Como você deve ter notado, você precisa especificar a duração da animação tanto no método de renderização quanto no CSS. É porque é assim que o React sabe quando remover as classes de animação do elemento e quando remover o elemento do DOM.

Salve as alterações acima e atualize a página. Depois que a página for carregada, em alguns segundos você poderá ver o texto animado.

Entrar/Sair da Animação

Para entender melhor a animação de entrada e saída, criaremos um pequeno aplicativo React. O aplicativo teria uma caixa de texto de entrada para inserir o nome. Você verá como adicionar a animação de entrada quando um nome for adicionado à lista.

Dentro app.jscrie uma nova classe chamada App.

class App extends React.Component {
  
}

Inicialize um data lista e um name variável 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, coloque uma caixa de texto de entrada para inserir o nome e um botão para adicionar o nome à lista de matrizes.

    Enter Name  
    

Defina a entrada handleChange evento e o add evento dentro do componente App.

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

o handleChange evento define o valor da caixa de texto de entrada para o name variável. Aqui está a aparência do 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 de add método, o nome inserido e um ID exclusivo são enviados para o data lista de matrizes.

Vincule o handleChange e add método no construtor do componente App.

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

Você exibirá os nomes inseridos em uma lista. Modifique o código HTML de renderização para adicionar a lista.

{
    this.state.data.map(function(player) {
         return 
{player.name}
    })
}

Para animar os itens recém-adicionados, adicionaremos o ReactCSSTransitionGroup etiqueta sobre o li elementos.

    
    {
      this.state.data.map(function(player) {
         return 
{player.name}
      })
    }
    

Adicione o seguinte CSS estilo de transição para o index.html página.

.anim-enter {
  opacity: 0.01;
}

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

Aqui está o componente completo do aplicativo:

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 (
      

        Enter Name  
        
        

        
        {
          this.state.data.map(function(player) {
             return 
{player.name}
          })
        }
        
        
        
      
    )
  }
}

Salve o acima e atualize a página. Digite um nome e digite o botão adicionar, e o item deve ser adicionado à lista com animação.

Da mesma forma, a animação de saída também pode ser implementada no código acima. Depois que a funcionalidade de exclusão for implementada no aplicativo, adicione o leave e leave-active classe para o index.html. Colocou o transitionLeave para True no ReactCSSTransitionGroup tag no método render, e você deve estar pronto para ir.

Embrulhando-o

Neste tutorial, você viu como começar a usar animações no React. Você criou um aplicativo React simples e viu como implementar a animação de aparecer e inserir. Para informações detalhadas sobre animações no React, recomendo ler a documentação oficial.

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

Nos últimos dois anos, o React cresceu em popularidade. Na verdade, temos vários itens no mercado disponíveis para compra, revisão, implementação e assim por diante. Se você estiver procurando por recursos adicionais sobre o React, não hesite em dar uma olhada neles.

Deixe-nos saber seus pensamentos nos comentários abaixo. Dê uma olhada na minha página de instrutor do Envato Tuts+ para mais tutoriais sobre React e tecnologias web relacionadas.