Üleminekuvara - CSS-trikid

Anonim

transition-propertyVara, tavaliselt kasutatakse osana transitionstenografist, saab määrata, mida vara või omadused, mida soovite rakendada ülemineku mõju.

Selleks esitage väärtusena vara nimi:

.example ( transition-property: color; )

Väärtus võib olla üks järgmistest:

  • Üksiku atribuudi nimi, nagu ülaltoodud näites
  • Komaeraldusega atribuutide nimed (lühi- või pikakäeline) mitme elemendi ühele elemendile üleminekuks
  • Märksõna none, mis näitab, et ükski omadus ei lähe üle
  • Märksõna all, mis näitab kõigi omaduste üleminekut (vaikimisi)

Kui eralda eraldab väärtused, vara nimed on sisuliselt kaardistatakse muu üleminekuatribuudid määratletud ( transition-timing-function, transition-duration, ja transition-delay). Seega tähendab see, et kui komadega eraldatud atribuutide loend sisaldab ühte või mitut kehtetut atribuudinime, lähevad teised atribuudid ikkagi üle ja kaardistatakse nende kavandatud seotud ülemineku omadustega.

Spetsifikatsioon kirjeldab seda öeldes:

"(U) tunnustamata või animeerimata atribuudid tuleb loendis hoida, et säilitada indeksite vastavus."

Kui kasutate väärtust nonevõi universaalseid märksõnu inheritvõi initial, ei saa neid väärtusi kasutada komadega eraldatud loendi osana, vastasel juhul põhjustab see süntaksi tõrke ja kogu rida ignoreeritakse.

Kõigi toetavate brauserite ühilduvuseks on vaja hankija eesliiteid, kusjuures viimane süntaks on deklareeritud viimasena:

.example ( -webkit-transition-property: color; -moz-transition-property: color; -o-transition-property: color; transition-property: color; )

IE10 (IE esimene stabiilne versioon, mida toetada transition-property) ei vaja -ms-eesliidet.

Brauseri tugi

Chrome Safari Firefox Ooper IE Android iOS
Töötab Töötab 4+ 10,5+ 10+ 2.1+ 3,2+