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.

Instalar react e react-dom ao projeto.

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

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

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:

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:

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

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

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.

Importar ReactCSSTransitionGroup dentro de app.js Arquivo.

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

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.

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.

Inicialize um data lista e um name variável dentro do estado inicial do componente.

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.

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

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:

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.

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

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

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

Aqui está o componente completo do aplicativo:

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.

Deixe um comentário

O seu endereço de e-mail não será publicado.