CSS transition: animace přes změnu třídy - základy

Mon, 9 Nov 2015 20:22:48 +1100

CSS vlastnost transition je taková kouzelná formule, kterou můžeme využít nesčetnými způsoby. Zjednodušeně řečeno je to animace. Provede to, co bychom za jiných okolností poslali do jQuery metodě animate. Použití je velice jednoduché, vše si lze pohodlně testovat ve Firebugu.

Dnešní článek bude takový úvod, abyste se s vlastností mohli seznámit, pokud ji ještě neznáte. V druhém článku bych pak ukázal využití v praxi: napíšeme si jednoduchý slider (carousel), který rozhýbe pouze změna třídy. Transition má 4 různé vlastnosti, které lze zapsat pod její definici. Povinný je ale pouze čas.

transition: animovaná vlastnost, délka, efekt, zpoždění

Tento zápis je ale zbytečně krkolomný a špatně zapamatovatelný. Navíc animovanou vlastnost většinou ani uvádět nechci, protože pak by se mi animovala pouze jedna vlastnost - nikoli všechny, které redefinuji.

Podívejme se na následující ukázku. Pouhou změnou třídy docílíme plynulé změny barvy, velikosti pozadí či šířky elementu. Jediný JavaScript na ukázkové stránce je změna třídy s timeoutem jedné vteřiny:

Test animace

.color-animate {background-color:red;color:white;transition:500ms; -webkit-transition:500ms;}
.color-animate:hover {background-color:green;color:black;}

Podpora

Na tabulku podpory se můžete podívat na této stránce. Pokud ji náhodou nějaká verze prohlížeče podporovat nebude, trápit nás to nemusí... Efekt jen proběhne okamžitě. Definici s -webkit- prefixem využijeme pouze pro Safari. Chrome už je naštěstí rozumný prohlížeč a hackovat ho není třeba. Stejně tak žádné -moz- prefixy uvádět nemusíme.

Kdy transition a kdy JavaScript

Transition je vlastnost stylů, tedy je potřeba ji podle toho i používat. Všude tam, kde definuji nějaký vzhled: hovery tlačítek, boxíků, jednorázové změna vzhledu a tak dále, a tak dále. V žádném případě bych transition nepoužíval na složité operace, kde se mění několik vlastností dohromady včetně rozměrů a pozic dohromady. To už je uživatelský zásah do stránky, který by měl dle logiky věci obsloužit JavaScript. A také prohlížeč by vás neměl rád...

Už ten slider, který v pokračování článku představím je tak trochu na hraně, ale měním jenom jediný atribut. Navíc i pár řádků JS ušetřím.Takže ve zkratce? Dělejte s tím jednoduché věci. Například na tomto webu mám 100ms na hlavní navigaci (změna pozadí), když se podíváte doprava na výpis mikročlánků, tak hover šipeček i jejich samotné zobrazení také řeším animací. Takže tak.