Animação basica em CSS3
Tulio Faria22 de maio de 2017
Recentemente eu estava planejando e desenvolvendo a interface para o curso de Socket.io, e como ela terá algumas animações à medida em que os dados chegam em tempo real, resolvi voltar a estudar CSS3, algo que há tempos não utilizo.
Às vezes ficamos focando em um navegador mais novo e esquecemos que algumas coisas podemos utilizar sem o Javascript, apenas com CSS. Vou criar uma pequena página HTML, um pouco de CSS e Javascript apenas para poder controlar a class:
.hello{ border:2px solid grey; transition: all 3s; } .hello-active{ border:2px solid red; background: grey; } <body> <div class="hello"> Olá! </div> <script> const node = document.querySelector('.hello') node.addEventListener('click', function(){ this.classList.add('hello-active'); }) </script> </body>
O que o transition faz? Ele fala basicamente assim, "qualquer transição que você fizer envolvendo essa classe vai ter uma animação de X segundos". Apenas a propriedade transition já é possível fazer muita coisa.
No caso acima, ao clicar, a borda grey muda para red e o background grey em uma transição que dura 3 segundos. Também podemos fazer uma animação 'ao contrário', fazendo ele voltar ao estado original adicionando ao script a seguinte linha:
<script> const node = document.querySelector('.hello') node.addEventListener('click', function(){ this.classList.add('hello-active'); }) node.addEventLiestener('transitionend', function(){ this.classList.remove('hello-active'); }) </script>
O evento transitionend faz com que, ao terminar o tempo determinado, remova do classList a class. Isso faz com que o CSS volte ao seu estado inicial em uma transição de 'vai e volta'. Podemos também adicionar animação em hover:
.hello.hover{ background: green; }
Como grande parte dos navegadores suporta CSS3 atualmente, conseguimos fazer tudo com ele, pelo menos para alguns tipos de aplicativos. Tudo isso utilizando apenas o transition, sem precisar utilizar Jquery. Confira os detalhes no vídeo:
Não perca nenhuma atualização. Cadastre seu e-mail, curta o DevPleno no Facebook e inscreva-se no canal. Deixe suas dúvidas e sugestões nos comentários.
Autor
Tulio Faria22 de maio de 2017