Pohyb
Transitions
Když se vzhled prvku změní, nemusí to být skokem. transition změnu rozloží do zlomku sekundy.
Rozhýbeme kartu výpravy: zvedne se pod myší, tlačítko plynule ztmavne a pod odkazem vyroste čára. Najíždějte myší na náhled.
Začátek
Změna skokem
Karta už na hover reaguje: zvedne se a stín zesílí. Tlačítko ztmavne. Ale všechno najednou, cvak.
Najeďte myší na kartu a na tlačítko. Pravidla s :hover znáte z lekce Pseudotřídy.
Vlastnost · 1
transition
Tlačítku řekneme: když se změní barva pozadí, ať to trvá 0,2 sekundy. Píše se na prvek samotný, ne do :hover, aby transition fungovala tam i zpátky.
Dvě hodnoty: která vlastnost a jak dlouho. Pro drobnosti jako tlačítka stačí 0,15 až 0,3 s. Delší transitions působí líně.
Vlastnost · 2
Víc vlastností najednou
Karta mění dvě věci: polohu a stín. Obě vypíšeme a oddělíme čárkou.
Existuje i transition: all 0.3s, ale rozhýbe úplně všechno, co se kdy změní, i to, co nechcete. Vypisujte vlastnosti.
Vlastnost · 3
Průběh ease-out
Ve výchozím stavu se pohyb rozjede, zrychlí a zpomalí (ease). Pro reakci na uživatele je lepší ease-out: vyrazí hned a zlehka dobrzdí. Karta pak reaguje svižněji.
Další průběhy: linear (stále stejně rychle), ease-in (rozjezd), ease-in-out. Čtvrtá hodnota by byla zpoždění: 0.3s ease-out 0.1s.
Ukázka
Čára, která vyroste
Všechno dohromady: pod odkazem je čára z ::after, zmáčknutá na nulovou šířku přes scaleX(0). Po hoveru se plynule roztáhne zleva.
Rozhýbávejte hlavně transform a opacity. Prohlížeč je zvládne plynule i na slabém telefonu. Změny width nebo margin přepočítávají celou stránku a můžou se trhat.
Responzivita
Na telefonu stisk
Na telefonu žádný hover není, efekty s :hover tam skoro neuvidíte. Zpětnou vazbu dá :active: tlačítko se při stisku na okamžik zmáčkne.
Klikněte na tlačítko v náhledu a podržte. :active platí, dokud je prst (nebo tlačítko myši) dole, takže funguje na telefonu i na počítači.
Shrnutí
Krátce a jen to, co se mění
Ano
transitionna prvku, ne v:hover- vyjmenované vlastnosti místo
all - délka 0,15 až 0,3 s a průběh
ease-out - rozhýbávat
transformaopacity :activejako zpětná vazba na dotyk
Ne
- transitions delší než půl sekundy u tlačítek
- transitions na
width,heightnebomargin