Como fazer animações em Ionic 4 com Animate.Css

Como fazer animações em Ionic 4 com Animate.Css

Hoje irei mostrar como você pode criar animações ricas em seu aplicativo de forma muito simples em ionic 4 utilizando uma biblioteca css chamada Animate.css.

Abaixo deixarei um vídeo ensinando criar animações.

PROMOÇÃO PARA USUÁRIOS DO IONICCLUB
ÚLTIMAS UNIDADES !
CLIQUE E ACESSE NOSSA LISTA DE CURSOS EM PROMOÇÃO!
Benefícios
  • Desconto acima de 80%
  • Certificado
  • Sem mensalidades
  • Acesso Vitalício
  • Grupo de WhatsApp

Ta sem tempo de ver o vídeo? Não tem problema, continue lendo o artigo que te darei o passo a passo.

Criando seu projeto em Ionic 4

Vá no prompt de comando e digite a linha baixo para criar seu projeto em ionic 4.

Ionic vai te perguntar se deseja usar cordova, em nossa caso pode ignorar.

Mais uma vez vai te perguntar se deseja usar o Ionic Pro, um recurso pago do Ionic, ignore também.

Pronto seu aplicativo foi criado!

Agora o processo é simples, vá na página index.html e adicione a referencia de nossa biblioteca animate.css dentro da tag HEAD

Seu aplicativo está pronto para receber as animações.

Para me antecipar eu adicionei uma imagem na pasta assets chamada eu.png.

Vá na página que deseja usar a animação e escolha algum objeto, pode ser uma div, imagem e etc.

No meu caso eu irei usar a imagem que eu adicionei.

Para adicionar a animação é muito simples, basta usar uma sequencia de classes css e pronto.

É necessário adicionar a classe animated e depois o nome da animação que deseja, a classe infinite eu usei somente para a animação ficar em um loop infinito.

Veja a animação em prática!

Se você deseja ver todas as animações de uma forma amigável, acesse o site.

http://daneden.github.io/animate.css

Toda documentação você encontra no GitHub
https://github.com/daneden/animate.css

Bom, espero que tenham gostado da dica!

Previous Bug no SQLite e Chromium deixa usuários em perigo!
Next Como instalar NodeJS, Ionic e Cordova no Windows

About author

You might also like

Artigos

Como rodar aplicativo android no celular e debugar pelo browser do PC

Uma dúvida muito comum dos desenvolvedores Ionic é a depuração remota de dispositivos Android.Neste artigo eu irei lhe ensinar como rodar seu aplicativo Ionic no celular e depura-lo diretamente no

Artigos

A surpresa escondida atrás do Ionic 4

Se você tem interesse em conhecer um pouco do poder do Ionic 4, veja o vídeo! No vídeo abaixo você irá ver: – Diferenças do Ionic 3 para Ionic 4

Artigos

Como criar componentes no Ionic 4

Fala galera!Hoje irei compartilhar com vocês uma dica muito útil que vai permitir que você evite de ficar replicando códigos no Ionic. Imagine um app que tenha o contato do