Samhliða kynningu á CSS3 koma margir nýir eiginleikar sem eru tiltækar til notkunar við að skapa mikla áhrif; Einn af gagnlegurustu er umskipti eignarinnar.
Umskiptareignin er mikilvæg ný þróun í CSS. Það er hægt að nota til að búa til breytilegar breytingar á div eða flokki með einfaldri uppbyggingu:
transition: property duration timing-function delay;Umskipti CSS3 er frábær leið til að bæta smá hreyfimyndum við síður án þess að stór kostnaður á JavaScript bókasafni eins og jQuery.
Áður en við byrjum geturðu séð kynningu hér á Umskipti eign í aðgerð .
Í fyrsta lagi þarf að skilgreina staðlaða eignina sem hún verður beitt til að hægt sé að breyta umskiptareigninni. Hugsanlega eru tvær algengustu eignirnar sem eru skilgreindar breidd og hæð. Til að skrifa eignina standalone einfaldlega nota:
transition-property: define propertyEftir að eignin hefur verið skilgreind, þá þarf að fá upphafs- og lokagildi. Þegar um er að ræða gildi eins og breidd eða hæð þarf að stilla eignina með upphafsgildum og síðan endanlegt gildi með einhverju öðru ástandi.
Til dæmis, hér setjum við umskiptareigininn í breidd, þá upphafsgildi breiddar og þá stillt lokaviðmiðið þegar þátturinn er sveiflast yfir:
#mainheader {transition-property:width;width:50px;}#mainheader:hover {width:75px;}Nú þegar við höfum skilgreint eignina til að breyta, upphafs- og lokagildi, þurfum við að skilgreina lengd breytinganna. Þetta er náð með því að skilgreina lengd í annaðhvort sekúndum eða millisekúndum eins og hér að neðan:
transition-duration: duration;Byggðu þetta í dæmiið sem eftirfarandi kóða er búin til:
#mainheader {transition-property:width;transition-duration:0.5s;width:500px;}#mainheader:hover {width:750px;}Þetta þýðir að mainheader div mun auka um 25 punkta í 5 sekúndur.
Kóðinn er nægjanlegur til að skapa góð áhrif, en við getum nýtt CSS3 breytingareigininn frekar með því að nota tímasetningaraðgerð. Með því að nota þessa eign er hægt að breyta hraðaferlinum um breytingartímann. Umskiptareignin er sjálfgefin sett á línulegan feril. Hins vegar getur þú skilgreint vellíðan, vellíðan, vellíðan, vellíðan og jafnvel þvermálin til að breyta hraðaferlinum. Cubic-bezier gerir þér kleift að skilgreina eigin gildi með því að nota (n, n, n, n) þar sem n getur verið á bilinu 0 og 1 (til dæmis línulegt væri (0,0,1,1)).
Bæti í þessum kóða í dæmi okkar leiðir til:
#mainheader {transition-property:width;transition-timing-function:ease-in-out;transition-duration:0.5s;width:500px;}#mainheader:hover {width:750px;}Enn fremur, eins og umskipti-lengd, með því að nota umskipti-tefja eign skilgreinir hlé áður en umskipti áhrif hefjast:
transition-delay: time;Að lokum er mikilvægt að hafa í huga tvö atriði þegar CSS3 breytingin er notuð. Í fyrsta lagi þurfa flestir vafrar í umferð að nota fyrirframforrit fyrir vafra til að nota það (undantekningarnar eru IE10, Opera og Firefox16 +):
-moz-umskipti: fyrir Firefox 15
-webkit-umskipti: fyrir Chrome og Safari
(Hafðu í huga að IE9 og lægri styður ekki yfirfærslueignina yfirleitt.)
Í öðru lagi, þrátt fyrir að ég hafi notað langan hönd í dæmunum hér að ofan til að fá skýrleika, er talið að það sé best að skrifa í stuttu formi sem hér segir:
#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;}Notaðu yfirfærslu eign CSS3? Hvernig er það í samanburði við jQuery-undirstaða tweens? Láttu okkur vita í athugasemdunum.