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

 |  HTML, CSS, JavaScript  |  792x
_

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.

Facebook Twitter Google+

Komentáře k článku "CSS transition: animace přes změnu třídy - základy"

Gravatar
nikdo 20. 1 2016, 08:36
1/2 Středa 20. Ledna 2016, 08:36  |  Chrome, Windows 7

Co znamená zápis: transition: 500ms;

Gravatar
Mike 20. 1 2016, 13:08
2/2 Středa 20. Ledna 2016, 13:08  |  Opera, Windows 8.1

změna jakékoli vlastnosti bude trvat 500 milisekund (půl vteřiny). je to pěkně vidět na ukázce linkované v článku.

Přidat komentář







Nevím, kolik to je
Parak simati, Muballit mitte, Nergal allatu mellamu mesaru, La tapallah Annuaki, Kettu Puluthu qillatua