« HE:labs
HE:labs

O Poder do CSS 3 - Transições

Postado por Matheus Costa em 09/02/2015

Mudando com classe.

Pac-Man

Transitions x Animations

No geral, transitions são usadas para alterar o estilo de um elemento gradativamente, ou seja, mudar a aparência de uma maneira mais suave do que o normal. Geralmente aplica-se em botões, links, menus e ultimamente vem sido implementados em radios e checkboxes tambem, trazendo uma experiência de uso mais agradável.

A grande diferença da transition pra animation, é que a transition precisa de um 'gatilho' para funcionar. Seja ele um :hover, :focus ou mesmo uma chamada via javascript.

Propriedades

  • transition-delay

pode ser tempo em segundos, initial ou inherit

  • transition-duration

mesmos valores válidos para o delay.

  • transition-property

none, all, initial, inherit ou uma propriedade como width por exemplo.

  • transition-timing-function

aceita ease, linear, ease-in, ease-out, ease-in-out, cubic-bezier(), initial, ou inherit

Exemplo 1 - Hover

Mais simples e mais utilizado, é a transition no :hover. Eu vou mudar o estado do Blinky de normal para quando ele fica vulnerável, ou em outras palavras, quando o Pac-man come as pastilhas maiores e fica de cara feia.

Como o fantasma tem vários outros elementos que vão ser alterados, eu logo defini que a transição vai acontecer em todas as <div> dentro da .field (que é a classe que mantém tudo alinhado).

 1 .field { 
 2   display: table;
 3   margin: 5% auto; 
 4   
 5   &:hover {
 6   
 7     div {
 8       @include transition(all 0.3s ease-in-out);      
 9     }  
10   } 
11 }

Então assim que o mouse estiver em cima da .field, os olhos ficarão vermelhos e a cabeça e as pernas vão ficar brancas.

 1 .head {
 2   background: $Light;
 3 }
 4 
 5 .eye {      
 6   background: $Blinky;
 7 }
 8 
 9 .legs {      
10   border-right-color: $Light;
11   border-left-color: $Light;
12 }

Além disso, vai aparecer a boca em formato zigue-zague na mesma cor dos olhos. Abaixo segue como eu fiz ela de uma maneira bem fácil usando um mixin do Compass.

 1 .mouth {
 2   position: absolute;
 3   left: 10%;
 4   top: 60%;
 5   height: 10px;
 6   visibility: visible;
 7   width: 111px;
 8   z-index: 1;
 9 
10   &:before {
11     content: '';
12     position: absolute;
13     background-repeat: repeat-x;
14     z-index: -1;
15     @include background(
16       linear-gradient(135deg, $bg, $bg  75%, $zig 75%, $zig),
17       linear-gradient(225deg, $bg, $bg  75%, $zig 75%, $zig),
18       linear-gradient(45deg, $bg, $bg  75%, $zig 75%, $zig),
19       linear-gradient(315deg, $bg, $bg  75%, $zig 75%, $zig)
20     );
21     background-position: 0.5em 0.5em, 0.5em 0.5em, 0 0.5em, 0 0.5em;
22     background-size: 1em 1em;
23     left: 0;
24     top: -1em;
25     height: 1em;
26     width: 100%;
27   } 
28 }

O resultado e o código completo estão no frame abaixo.

See the Pen Blinky Pac-Man Transition by Matheus Costa (@matheusagcosta) on CodePen.



Exemplo 2 - Javascript

Quando combinados com Javascript, podemos criar interações mais complexas. E para isso a transition é recomendado, pois o animation possui as @keyframes com as especificações corretas para a animação, isso não deixa muito intutivo para ser alterado via JS.

No caso, vamos criar movimentos com cliques. Conforme o usuário clica em algum canto da tela, o fantasma faz o percurso. Para que esse movimento seja suave, vamos adicionar a transition.

1 .object {
2   @include transition(left .5s ease-in-out, top .5s ease-in-out);
3   left: 50px;
4   position: relative;
5   top: 50px;
6 }

O javascript vai fazer todo o resto:

  • Configurar o getClickPosition para pegar cada clique dentro da .area;
  • Calcular o ponto exato do Clique;
  • Setar as posições left e top na div do fantasma para que a transition mova suavemente;
 1 var theThing = document.querySelector(".object");
 2 var container = document.querySelector(".area");
 3  
 4 container.addEventListener("click", getClickPosition, false);
 5  
 6 function getClickPosition(e) {
 7     var parentPosition = getPosition(e.currentTarget);
 8     var xPosition = e.clientX - parentPosition.x - (theThing.clientWidth / 2);
 9     var yPosition = e.clientY - parentPosition.y - (theThing.clientHeight / 2);
10      
11     theThing.style.left = xPosition + "px";
12     theThing.style.top = yPosition + "px";
13 }
14  
15 function getPosition(element) {
16     var xPosition = 0;
17     var yPosition = 0;
18       
19     while (element) {
20         xPosition += (element.offsetLeft - element.scrollLeft + element.clientLeft);
21         yPosition += (element.offsetTop - element.scrollTop + element.clientTop);
22         element = element.offsetParent;
23     }
24     return { x: xPosition, y: yPosition };
25 }

Com isso temos o seguinte resultado (Clique na area preta):

See the Pen Blinky Moving by Matheus Costa (@matheusagcosta) on CodePen.



Conclusão

Não deixe seus elementos que mudam de estado sem transition, o feedback gradativo além de trazer elegância pro site, faz os usuários entenderem melhor o funcionamento das ações.

Compartilhe

Sabia que nosso blog agora está no Medium? Confira Aqui!