Angular 5 Animations: increment and decrement

Até a data deste artigo o Angular está na versão stable (v4.4.6), mas nós já podemos testar algumas das funcionalidades que irão vir com a…

Até a data deste artigo o Angular está na versão stable (v4.4.6), mas nós já podemos testar algumas das funcionalidades que irão vir com a versão v5. Para esse artigo nós iremos partir de um projeto com o Angular na versão stable, iremos baixar ele do GitHub e atualizaremos ele para versão (5.0.0-rc.1). No final desse artigo nós teremos a animação abaixo:

Angular 5 Animation

Startup

Nosso primeiro passo será baixarmos o projeto. Para isso, escolha um diretório no seu computador e execute o comando abaixo na sua console:

git clone https://github.com/programadriano/angular-animations.git

Com o projeto clonado, navegue até ele via CMD e execute o comando npm i, esse comando irá baixar as dependências necessárias para nossa aplicação.

Para o nosso próximo passo precisaremos de uma IDE, para esse artigo iremos utilizar o Visual Studio Code. Abra ele e navegue até o projeto que acabamos de clonar.

Upgrade da versão do Angular

As animações increment e decrement, são algumas das novidades que virão com a nova versão do Angular v5, caso você tente executar os exemplos desse artigo na versão stable, irá receber o erro abaixo na sua console.

Error Animation Angular 5

Com o nosso projeto aberto no VS Code, vamos atualizar as nossas referências. Para isso, abra o seu arquivo package.json e atualize ele com as as seguintes referências.

Criando animação

Agora que estamos com o nosso projeto atualizado, vamos criar o código necessário para nossa animação. Para que possamos organizar o nosso código, crie um novo componente com o nome exemplo01. Para isso, execute o comando abaixo para que possamos criar um novo componente:

ng g c components/exemplo01

Agora atualize os arquivos: exemplo-animation.component.ts e exemplo-animation.component.html conforme demonstrado abaixo.

exemplo-animation.component.ts

exemplo-animation.component.html

Vamos entender os exemplos a cima, começando pelo nosso ExemploAnimationComponent:

Dentro de animations nós temos:

  • valueAnimation: trigger que iremos utilizar nossa animação.
  • transtions: increment: com a cor azul e a font-size de 50px e decrement: com a cor vermelha e a font-size de 50px;

Em seguida nós criamos um array com dois valores, para nossa animação, depois nós temos:

  • Um método chamado banners retornando um dos valores do nosso array pelo seu index.
  • No nosso ngOnInit, nós utilizamos o obervable para que de dois em dois segundos altere o valor da nossa variável selectedIndex.

Por fim, passamos via property bind o valor da nossa trigger para o nosso HTML e executamos o ngFor no retorno do nosso método banners.

Para que possamos testar o nosso código execute o comando ng serve e abra a seguinte URL no seu navegador: http://localhost:4200/.

Esse artigo foi inspirado em um dos artigos escritos pelo Eliran Elnasi.

Compartilhe:

Share on facebook
Facebook
Share on twitter
Twitter
Share on pinterest
Pinterest
Share on linkedin
LinkedIn

Table of Contents

Postagens Relacionadas

iphone12

Apple iPhone 12 Pro Max

Apple iPhone 12 Pro Max  CPU Apple A14 Bionic  RAM 6 GB  Armazenamento 512 GB  Display 6.7 XDR OLED  Câmera 12 Mp + 12 Mp
RockBottomRiser

Rock Bottom Riser

Rock Bottom Riser 01/03/2021(US) – Documentário – 1h 10min –   Nota: 0/10   Sinopse     Elenco Nainoa Thompson Como – master navigator Moses
SaferatHome

Safer at Home

Safer at Home 26/02/2021(US) – Filmes – 0h 0min –   Nota: 0/10   Sinopse     Elenco Mais informações Título Original Safer at Home
SouLunaOUltimoShow

Sou Luna: O Último Show

O elenco de “Sou Luna” se apresenta ao vivo pela última vez no mítico estádio Luna Park em Buenos Aires. Vamos acompanhá-los na intimidade dos bastidores e r…