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 instalar NodeJS, Ionic e Cordova no Windows

No post de hoje você irá aprender a preparar sua máquina para começar a desenvolver aplicativos em Ionic Framework, seja na versão do Ionic 1, Ionic 2, Ionic 3 ou

Artigos

Como fazer meu aplicativo em Ionic falar?

No artigo de hoje irei ensinar um recurso bastante interessante que vejo poucas pessoas utilizando hoje em dia, nós iremos aprender fazer nosso aplicativo falar com o usuário, isso mesmo,

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