Transition.js
Controlando transições de CSS com Javascript
Existem várias formas de tornar a aparência de um site mais atraente. Trabalhar com harmonia de cores, proporções entre tamanho de fontes e componentes podem ser uma alternativa para garantir uma melhor apresentação.
Contudo, cada vez mais é comum ver que além da disposição dos conteúdos, a interação é algo importante na experiência de uso dos sites, e uma maneira de tornar o seu site mais agradável e bonito é utilizando animações.
Adicionar animações ao seu site ou aplicativo é uma forma poderosa para atrair a atenção do usuário à áreas importantes do seu produto, visto que o cérebro humano é bem programado para prestar atenção a objetos em movimento.
Porém, quando as animações são aplicadas, elas não oferecem um controle tão sutil. As transições em CSS são aplicadas a um elemento a fim de especificar as propriedades de mudança para que ela ocorra gradualmente ao longo do tempo.
Elas tornam possível a manipulação da velocidade de animações ao alterarmos as propriedades de um elemento em CSS. Em outras palavras, em vez de obter uma mudança instantânea, podemos obter uma mudança suave e bem mais agradável ao olhar do usuário.
- Mudança de propriedades sem transição:
- Mudança de propriedades utilizando transições:
Enfim, as diferenças entre transições e animações são:
Transições ativam animações dependendo de certas mudanças de propriedades. Elas podem ocorrer com hover, focus, quando uma classe que foi adicionada mudar alguma propriedade, quando um código em Javascript alterar uma propriedade diretamente, etc. Alguns exemplos de transições podem ser encontrados aqui:
- Transições com botões
- Menu deslizante
- Outro modo de enxergar a transição em um página Web pode ser visível nesse exemplo:
Animações são efeitos ou uma cadeia de efeitos que ocorrem em um elemento, como se fosse um vídeo. Exemplos:
Bem, depois de analisadas as diferenças, mostrar os pontos positivos e alguns exemplos, vamos partir para o que interessa.
Como utilizar transições no Javascript
Alguns web designers acreditam que manipular animações e transições apenas com CSS é mais complicado do que com Javascript. Uma boa maneira de satisfazer as pessoas que tem dificuldade, é utilizando bibliotecas que lidam com esse tipo de situação. Um exemplo de uma biblioteca nesse estilo é a Transitionjs.
A Transitionjs é uma biblioteca simples, criada por Simon Hanukaev (https://github.com/smnh), com o intuito de simplificar a criação de transições em CSS utilizando Javascript.
Para utilizá-la, primeiramente precisamos efetuar o download em:
http://transitionjs.orgOu, se preferir, você pode utilizar o link externo da versão minificada:
<script src="http://transitionjs.org/js/transition.min.js"></script>Feito isso, é só incluir a biblioteca dentro do seu projeto. A função a ser utilizada é: transition.begin(element, properties[, options])
Em element , informaremos o elemento em que a transição ocorrerá. Já em properties , teremos que indicar as propriedades que o elemento terá após a transição. Podemos passar essas informações em vários formatos. Exemplos:
Vetor: transition.begin(element, ["border-color", "#fff", "#2a6bf4", "250ms", "linear"]);
String: transition.begin(element, "border-color #fff #2a6bf4 250ms linear");
Objeto: transition.begin(element, {property: "border-color", from: "#fff", to:"#2a6bf4", duration:"250ms", timingfunction:"linear"});
Também podemos misturar vetores com objetos, strings com vetores etc.
Em options, podemos informar algumas coisas como a duração, delay e várias outras funções que a biblioteca oferece. Um bom exemplo a ser destacado é a timingFunction . Ela determina como a transição ocorrerá ao longo do tempo, dependendo do tipo de curva de aceleração.
Algumas já existem por padrão (como a linear e a ease), contudo você também pode criar as suas próprias curvas utilizando cubic-bezier e informando as coordenadas para formá-las.
A curva de Bézier é uma curva polinomial expressa como a interpolação linear entre alguns pontos representativos, chamados de pontos de controle. É uma curva utilizada em diversas aplicações gráficas como o Illustrator, Freehand, Fireworks, GIMP, Photoshop, Processing, Inkscape e CorelDRAW, e formatos de imagem vetorial como o SVG. Esse tipo de curva também pode originar Superfícies de Bézier, bastante utilizadas em modelagem tridimensional, animações, design de produtos, engenharia, arquitetura entre outras aplicações. Fonte: https://pt.wikipedia.org/wiki/Curva_de_B%C3%A9zier
Essas curvas são bem apresentadas em alguns exemplos neste site, como os tipos de curva ease-in, ease-out, etc. Você também pode alterar os pontos de controle e ter uma amostra visual de como a transição ocorrerá. Essas curvas são importantes, pois são o fator determinante das transições.
Tendo em mente todas essas informações, é só colocar em prática. Vou mostrar alguns exemplos simples.
Demonstrando o Transition.js
Esta simples função apenas altera a cor de fundo do elemento de preto até azul. O tipo de curva utilizado foi linear, o qual possui esta forma:
Mudando a posição de um elemento gradativamente:
Nesta função as propriedades em forma de objeto, só pra deixar mais claro o que está ocorrendo. Com ela, a caixa se desloca para a direita pelo eixo X (horizontal) em 500px. O tipo de curva utilizado foi ease-in-out, o qual possui esta forma:
Esses são apenas exemplos muito básicos. A ideia é misturar as várias propriedades de transição que a biblioteca oferece para obter efeitos mais complexos.
Considerações Finais
Porque não usar apenas CSS? A biblioteca transitionjs provê o uso dessas transições de uma maneira bem simples e de fácil entendimento. Ela não depende de nenhuma outra biblioteca e também corrige e reinicia corretamente as propriedades de transição do CSS.
Enfim, apesar de não ser muito famosa ou utilizada (como JQuery), essa biblioteca é bem interessante para ter uma noção básica de como funcionam esses efeitos, já que são muito usados. Visto que o seu único propósito é mostrar o funcionamento das transições, ela é um bom começo para quem deseja aprender mais sobre o assunto.