7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Code
  2. React

Introdução a Animações no React

Read Time: 5 mins

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
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Scroll to top
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.