Ao construir o mjamado.com, evitei ao máximo usar animações por Javascript, preferindo usar CSS Transitions. O motivo óbvio é o desempenho: uma animação ser controlada pelo renderer interno dos browsers será sempre mais rápida e leve do que pelo motor de JS.

Um motivo menos claro é a separação de responsabilidades: cabe ao HTML mostrar os dados, ao JS controlar as acções sobre esses dados (acções apresentacionais - qualquer acção que altere os dados deve ser server side) e às CSS controlar como são apresentados os dados. Uma transição entre visualizações de dados é, claramente, uma responsabilidade apresentacional – logo, uma responsabilidade de CSS.

As CSS Transitions são novinhas em folha; pertencem à especificação CSS3, ainda estão em estado de working draft na W3C, mas o suporte já é sólido: segundo o caniuse.com, e corroborado pelos meus testes, apenas o Opera Mini, usado nalguns telemóveis menos potentes, e o (sem surpresa) Internet Explorer (até à versão actual, a 9) não as suportam. Todos os outros browsers tem suporte, pelo menos, há 5 gerações.

As transições funcionam de um estilo para outro, seja como for que esse estilo varie (por estados, mudança de classe ou id, directo ou indirecto), e podem animar qualquer valor passível de ser interpretado como numérico – cores, por exemplo, podem ser declaradas como nomes, mas têm um valor intrínseco numérico. São parametrizadas por quatro valores: a propriedade a animar, a duração, o nome de uma função de animação e o tempo de atraso de início de animação.

A sintaxe exacta é a seguinte (a bem da brevidade, apenas o standard é indicado; como o suporte dos browsers ainda é dependente de extensões específicas, não esquecer de acrescentar as regras prefixadas com -moz-, -o-, -webkit- e -ms-, para o futuro IE10):

.btn
{
  background-color: rgb(180,180,180);

  // em separado...
  transition-property: background-color;
  transition-duration: 1s;
  transition-timing-function: linear; // outros valores: ease, ease-out, ease-in
  transition-delay: 0s; // começa imediatamente

  // ... ou por atalho
  transition: background-color 1s linear 0s;
}

.btn:hover
{
  background-color: rgb(100,180,255);
}

Mais do que uma animação pode ser definida, separando os vários valores por vírgulas:

.outroTeste
{
  background-color: rgb(180,180,180);
  color: rgb(0,0,0);
  width: 10em;

  // em separado...
  transition-property: background-color, color, width;
  transition-duration: 1s, 1s, 0.5s;
  transition-timing-function: linear, linear, ease-out;
  transition-delay: 0s, 0s, 1s; // width só vai ser animada depois das outras animações

  // ... ou por atalho
  transition: background-color 1s linear 0s, color 1s linear 0s, width 0.5s ease-out 1s;
}

.outroTeste:hover
{
  background-color: rgb(100,180,255);
  color: rgb(20,20,100);
  width: 20em;
}

No exemplo abaixo, quem tiver browsers modernos verá uma transição de 1 segundo entre um botão cinza e um botão azul claro quando passar o rato por cima, e o inverso quando tirar o rato:

Botão!

Existem várias maneiras de forçar comportamento consistente no IE 9 e inferiores – a mais simples será animar as propriedades relevantes através de JS. No entanto, esta é uma técnica que degrada de forma bastante graciosa: a animação não é efectuada, mas as novas propriedades são aplicadas. Os utilizadores verão um mero salto entre os dois estados.

Para finalizar, notem que podem usar transições entre, por exemplo, duas classes CSS completamente distintas: eu usei uma pseudo-classe nos exemplos (:hover), mas não é obrigatório. Depois, a classe pode ser trocada (ou acrescentada) via JS. Caso usem classes distintas, só não se esqueçam que ambas as classes devem ter as propriedades transition; se apenas uma tiver, a transição só é animada dessa para a outra, dando um salto no sentido contrário.

Partilhar no Sapo Links Partilhar no del.icio.us Partilhar no Digg Partilhar no Twitter Partilhar no StumbleUpon Partilhar no MySpace Partilhar no Facebook

Comentários Deixar um comentário

Tem que efectuar login para poder deixar comentários!

Se não está registado, registe-se aqui.
 Doar (via PayPal)
 Categorias
 Arquivo
 Projectos em Destaque
 Últimas Postas no Blog
 Últimos Comentários do Blog