Spolu se zavedením CSS3 přichází mnoho nových funkcí, které jsou k dispozici pro použití při vytváření skvělých efektů; jednou z nejužitečnějších je vlastnost přechodu .
Vlastnost přechodu je důležitým novým vývojem v CSS. Může být použita k vytvoření efektu dynamické změny na div nebo třídě pomocí jednoduché struktury:
transition: property duration timing-function delay;Přechod CSS3 je skvělý způsob, jak přidat stránky do malých animací bez velké režie knihovny JavaScript, jako je jQuery.
Než začneme, můžete zde vidět demo vlastnost přechodu v akci .
Za prvé, aby přechodová vlastnost fungovala, musí být definována standardní vlastnost, kterou bude použita. Pravděpodobně dvě nejběžnější vlastnosti, které budou definovány, jsou šířka a výška. Chcete-li napsat vlastnost samostatně, jednoduše použijte:
transition-property: define propertyNásledně, jakmile je vlastnost definována, je třeba přiřadit počáteční a koncové hodnoty. V případě hodnot, jako je šířka nebo výška, musí být vlastnost nastavena s počáteční hodnotou a poté s koncovou hodnotou s jinými podmínkami.
Například zde nastavíme přechodovou vlastnost na šířku, pak počáteční hodnotu šířky a poté nastavíme koncovou hodnotu, když se element pohybuje nad:
#mainheader {transition-property:width;width:50px;}#mainheader:hover {width:75px;}Nyní, když jsme definovali vlastnost k transformaci, počáteční a koncové hodnoty, musíme definovat dobu trvání přechodu. Toho je dosaženo definováním délky v sekundách nebo milisekundách, jak je uvedeno níže:
transition-duration: duration;Budování tohoto do příkladu je vytvořen následující kód:
#mainheader {transition-property:width;transition-duration:0.5s;width:500px;}#mainheader:hover {width:750px;}To znamená, že hlavový rozbočovač div se bude rozšiřovat o 25 pixelů po dobu 5 sekund.
Kód je dostatečný k vytvoření pěkného efektu, ale můžeme dále využít vlastnost přechodu CSS3 pomocí funkce časování. Pomocí této vlastnosti je možné změnit rychlostní křivku trvání přechodu. Přechodová vlastnost je ve výchozím nastavení nastavena na lineární křivku. Nicméně můžete definovat jednoduchost, lehkost, lehkost, lehkost a dokonce i kubickou změnu křivky rychlosti. Cubic-bezier umožňuje definovat vlastní hodnoty pomocí (n, n, n, n), kde n může být mezi 0 a 1 (např. Lineární by byla (0,0,1,1)).
Přidáním tohoto kódu do našeho příkladu máme výsledky:
#mainheader {transition-property:width;transition-timing-function:ease-in-out;transition-duration:0.5s;width:500px;}#mainheader:hover {width:750px;}Navíc, podobně jako přechodová doba, pomocí vlastnost zpoždění přechodu definuje pauzu před zahájením přechodového efektu:
transition-delay: time;Nakonec je důležité při použití vlastností přechodu CSS3 zvážit dvě věci. Za prvé, většina prohlížečů v oběhu v současné době vyžaduje předponu prohlížeče k jejich použití (výjimkou jsou IE10, Opera a Firefox16 +):
-moz-transition: pro Firefox 15
-webkit-transition: pro Chrome a Safari
(Mějte na paměti, že IE9 a nižší nepodporují přechodovou vlastnost vůbec.)
Za druhé, ačkoli jsem použil dlouhou ruku v příkladech uvedených výše, je to považováno za nejlepší postup psát v krátké formě, a to následovně:
#mainheader {-moz-transition: width ease-in-out 0.5s 0.1s; /* for Firefox 15 */-webkit-transition: width ease-in-out 0.5s 0.1s; /* for Chrome and Safari */transition: width ease-in-out 0.5s 0.1s;width:500px;}#mainheader:hover {width:750px;}Používáte vlastnost přechodu CSS3? Jak se porovná s tweety založenými na jQuery? Dejte nám vědět v komentářích.
Doporučený snímek / náhled, pohyblivý obraz přes Shutterstock.