Advertisement
  1. Code
  2. React

Introdução a Animações no React

by
Read Time:6 minsLanguages:

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.

Instalemos react e react-dom no projeto.

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

Instalemos babel para converter a sintaxe JSX em JavaScript.

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:

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

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

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

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

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.

Importemos ReactCSSTransitionGroup dentro de app.js.

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

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.

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.

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

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.

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

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

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.

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

Para animar os items recém adicionados, adicionaremos a tag ReactCSSTransitionGroup sobre os elementos li.

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

Eis o componente App completo:

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.

Advertisement
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.