Prechodný majetok - Triky CSS

Anonim

transition-propertyVlastnosť, bežne používané ako súčasť transitionskratku, slúži na definovanie, aký majetok, alebo vlastnosti, ktoré chcete použiť prechodový efekt.

To sa deje tak, že sa ako hodnota uvedie názov vlastnosti:

.example ( transition-property: color; )

Hodnota môže byť jedna z nasledujúcich:

  • Jeden názov vlastnosti, ako v príklade vyššie
  • Zoznam mien vlastností oddelených čiarkami (skratka alebo longhand) na prechod viacerých vlastností na jeden prvok
  • Kľúčové slovo none, ktoré naznačuje, že žiadna vlastnosť nebude prechodná
  • Kľúčové slovo all, ktoré označuje prechod všetkých vlastností (predvolené)

Pri čiarka oddeľovanie hodnôt, názvy vlastností v podstate mapované do iných prechodových vlastnosti definované ( transition-timing-function, transition-duration, a transition-delay). To znamená, že ak zoznam vlastností oddelených čiarkami obsahuje jeden alebo viac neplatných názvov vlastností, ostatné vlastnosti budú stále prechodné a budú mapované na ich zamýšľané súvisiace vlastnosti prechodu.

Špecifikácia to popisuje slovami:

„(U) nerozpoznané alebo neanimovateľné vlastnosti musia byť v zozname, aby sa zachovala zhoda indexov.“

Ak použijete hodnotu nonealebo univerzálne kľúčové slová inheritalebo initial, tieto hodnoty nemožno použiť ako súčasť zoznamu oddeleného čiarkami, inak to bude mať za následok syntaktickú chybu a celý riadok bude ignorovaný.

Kvôli kompatibilite vo všetkých podporovaných prehľadávačoch sú vyžadované predpony dodávateľov so štandardnou syntaxou deklarovanou ako posledná:

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

IE10 (prvá stabilná verzia IE, ktorá podporuje transition-property) nevyžaduje -ms-predponu.

Podpora prehľadávača

Chrome Safari Firefox Opera IE Android iOS
Tvorba Tvorba 4+ 10,5+ 10+ 2,1+ 3,2+