Prehodna lastnost - CSS-triki

Anonim

transition-propertyLastnost, ki se običajno uporabljajo kot del transitionokrajšavi, se uporablja za opredelitev, kaj premoženja ali lastnosti, ki jih želite uporabiti učinek prehoda.

To se naredi z navedbo imena lastnosti kot vrednosti:

.example ( transition-property: color; )

Vrednost je lahko ena od naslednjih:

  • Eno ime lastnosti, kot v zgornjem primeru
  • Seznam imen lastnosti, ločenih z vejico (stenografsko ali dolgoročno), za prehod več lastnosti na en element
  • Ključna beseda none, ki označuje, da nobena lastnost ne bo prešla
  • Ključna beseda all, ki označuje, da bodo vse lastnosti prehodne (privzeto)

Pri vejico ločevanje vrednosti so imena lastnosti bistvu preslikan v drugih prehodnih lastnosti opredeljenih ( transition-timing-function, transition-durationin transition-delay). To pomeni, da če seznam lastnosti, ločenih z vejico, vključuje eno ali več imen lastnosti, ki so neveljavna, se bodo druge lastnosti še vedno prešle in preslikale na predvidene povezane lastnosti prehoda.

Specifikacija to opiše z besedami:

"(U) neprepoznane ali neanimirane lastnosti je treba hraniti na seznamu, da se ohrani ujemanje indeksov."

Če uporabljate vrednost noneali univerzalne ključne besede inheritali initial, teh vrednosti ni mogoče uporabiti kot del seznama, ločenega z vejico, sicer bo to povzročilo napako v sintaksi in celotna vrstica bo prezrta.

Za združljivost v vseh podpornih brskalnikih so potrebne predpone ponudnikov s standardno sintakso, razglašeno za zadnjo:

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

IE10 (prva stabilna različica IE, ki podpira transition-property) ne zahteva -ms-predpone.

Podpora za brskalnik

Chrome Safari Firefox Opera IE Android iOS
Deluje Deluje 4+ 10,5+ 10+ 2.1+ 3,2+