Transitions — koření moderního webu

V tomto článku bych nechtěl popisovat, co jsou transitions, a vysvětlovat základní věci, jako je syntaxe zápisu. Spíš se chci zaměřit na to, že jejich používání není žádná složitá věda a i jednoduché transitions dokáží okořenit kterýkoli web.

Pokud vezmu v úvahu, že zastoupení IE8 a IE9, které transitions nepodporují, je v rámci jednotek procent, použití už nic nebrání. Použití transitions nezpůsobí nefunkčnost webu v těchto starších prohlížečích. Transition jen vytvoří animaci z počáteční do koncové hodnoty, takže web je plně funkční a jen nevypadá tak “cool” :).

Začněte něčím jedoduchým

Pro začátek úplně stačí nastavit transition na barvu odkazu při hoveru nebo např. pozadí na tlačítcích. Možná vás překvapí, jak takhle jednoduché věci dokáží web osvěžit. Nezabere to skoro žádný čas navíc a z vlastní zkušenosti vím, že stačí transition na odkazech a z webu už máte úplně jiný pocit.

Co všechno lze animovat?

Před pár lety jsem narazil na tenhle článek. Není zrovna aktuální (i když nemyslím, že by se od té doby specifikace nějak zásadně změnila), ale chci jen ukázat, že možností je opravdu hodně. Navíc když si uvědomíte, že je lze různě kombinovat, dostáváme se v podstatě k nepřebernému množství variant. Tím nechci říct “začněte používat transitions na co nejvíce vlastností”. Vůbec ne, v jedoduchosti je síla a i pro složitější animace si vystačíte se základními vlastnostmi, jako je barva textu, barva pozadí, padding, margin, pozicování nebo rozměry.

Příklad několika základních transitions

Tip: pokud kombinujete více vlastností, vyjmenujte je exaktně a nepoužívejte klíčové slovo all. Zbytečně tím vytěžujete prohlížeč.

Experimentujte

Udělejte si nějaké jednoduché demo a zkoušejte, testujte, kombinujte. Nezapomeňte na  :before nebo :after pseudo-elementy, které můžete využít na animaci různých doplňkových prvků (pozadí, podtržení, šipky). Níže jsem připravil pár příkladů.

HTML syntaxe zůstává stejná, jen se mění CSS třída.

Poslední ukázku jsem si vypůjčil od kolegy Toma Krejčího, všiměte si využití atributu data-text ve vlastnosti content u pseudo-elementu :after.

Později neznamená nutně špatně

Na přetřes přichází vlastnost transition-delay. Dejme tomu, že máme několik elementů, které chceme animovat postupně, jednoduše proto, že to pak vypadá líp. Pojďme si to vysvětlit na praktickém příkladu. Budeme mít jeden kruhový element a kolem něj postupně při hoveru zobrazíme dalších 8 menších kruhů. Každý kruh chceme animovat se zpožděním 40ms za tím předchozím. Proto hodnoty 40, 80, 120...

3D

Ano, s pomocí transitions jdou vytvořit i jednoduché 3D animace. Na příkladu vizitky, která se při hoveru otáčí, si ukážeme, jak to lze provést. Tady bych obzvlášť upozornil na vlastnost perspective, kterou použijeme na rodičovském elementu. Pokud nenastavíte perspektivu, animace bude působit ploše a nereálně.

Připravíme si holder pro vytvoření 3D perspektivy a dovnitř vložíme dva elementy z nichž jeden bude představovat líc a druhý rub vizitky. Pomocí rotateY rubový element otočíme o 180 stupňů a nastavíme nižší z-index. Při hoveru jen změníme hodnotu rotateY a transition už nám zajistí animaci otočení. Aby hover stav dobře fungoval i ve starších IE, je potřeba při hoveru prohodit i z-indexy. Pro moderní prohlížeče to není potřeba, skrytí obsahu zajistí vlastnost backface-visibility.

Při vytváření animace je dobré využívat css transformace. Má to hned několik výhod:

  • transformace využívají subpixelové renderování a tím je animace vizuálně plynulejší
  • neovliňují layout a tím nedochází k hromadnému přepočítávání, tzv. reflow
  • 3d transfromace zapínají hardwerovou akceleraci (využije výkon GPU). To zajistí plynulejší animaci.

Transitions a javascript

Pokud chcete spouštět transitions v závislosti na nějaké akci uživatele, jako je například klik na element, zaskrolování na určitou úroveň stránky atd., neobejdete se bez javascriptu. Ale nelekejte se, nemusí to být nutně nějaký složitý kus kódu. Stačí si uvědomit, jak transitions fungují a co je spouští. Transition se spustí v momentě jakékoli změny, třeba i přidáním CSS třídy na rodičovský prvek elementu.

Opět si to ukážeme na příkladu. Vezmeme si dva předchozí příklady a obě animace spustíme klikem na tlačítko. Ne že by to v tomto případě bylo nějak logické, jen chci demonstrovat jak lze jednoduše spustit několik animací zároveň. Stačí jen pomocí javascriptu při kliku na tlačítko přidat třídu “animate” na element div#anim-wrap, kterým jsme obalili animační prvky. To je vše, zbytek už si pořešíme v rámci CSS viz příklad.

Tím bych povídání o transitions uzavřel. Je mi jasné, že pro senior kodéry v tomto článku toho asi nebylo moc nového. ale doufám, že tu našli inspiraci začínající a junior kodéři. Tak snad se po přečtení alespoň někdo naučil něco nového :).

Poznámka: Pro zjednodušení nepoužívám v příkladech vendor prefixy. Co jsem se díval, tak příklady fungují v posledních verzích FF i Chrome, ale pro zajištění funkčnosti ve všech prohlížečích podporujících transitions je to samozřejmě potřeba. Existuje pohodlnější cesta a to je využítí některého z CSS preporocesorů (Stylus is the best :)).

Sdílet článek:

Petr Grochál Autor: Petr Grochál
petr.grochal@superkoderi.cz

Komentáře

  • Avatar

    1. kaktus 07. 11. 2014 v 15:20

    Pekny clanok pre zaciatocnikov.

    Iba sa chcem opytat, ma v poslednom priklade v javascripte konkretny zmysel vlozenie #anim-wrap do premennej?

    Pretoze: var $wrap = $(‚#anim-wrap‘); $wrap.toggleClas­s(‚animate‘);

    sa da napisat aj ako: $(‚#anim-wrap‘).toggle­Class(‚animate‘);

    a mame o jeden riadok kodu menej.

  • Avatar

    2. Petr - SuperKodér | 07. 11. 2014 v 15:32

    Máš pravdu, v tomto případě to smysl nemá. Obyčejně nemám ve zvyku psát javascripty o třech řádcích :) Pokud bych chtěl s tou selekcí pracovat trochu více, je dobré si ji nacachovat do proměnné.






Využijte formátování Texy!

SuperKodéři se mění na SUPERKODERS. Už jsme spustili prozatímní jednoduchou stránku, která vám nové Superkodéry představí.

Přejít na nový web Zůstat na současném webu