Pārejas īpašums - CSS-triki

Anonim

transition-propertyĪpašumu, parasti izmanto kā daļu no transitionsaīsinājumus, tiek izmantots, lai noteiktu, kāda īpašumu, vai īpašības, kuru vēlaties piemērot pārejas efektu.

Tas tiek darīts, kā vērtību norādot īpašuma nosaukumu:

.example ( transition-property: color; )

Vērtība var būt viena no šīm:

  • Atsevišķa īpašuma nosaukums, kā parādīts iepriekšējā piemērā
  • Ar komatiem atdalīts īpašumu nosaukumu saraksts (stenogramma vai garo roku) vairāku rekvizītu pārejai uz vienu elementu
  • Atslēgvārds none, kas norāda, ka neviens īpašums netiks mainīts
  • Atslēgvārds all, kas norāda, ka visi īpašumi tiks mainīti (noklusējums)

Kad komats atdala vērtības, tad īpašuma vārdi būtībā kartēti uz citām pārejas īpašībām, kuras ( transition-timing-function, transition-duration, un transition-delay). Tas nozīmē, ka, ja ar komatiem atdalītajā īpašumu sarakstā ir viens vai vairāki īpašumu nosaukumi, kas nav derīgi, pārējie rekvizīti joprojām tiks mainīti un tiks piesaistīti tiem paredzētajiem saistītajiem pārejas īpašumiem.

Specifikācija to raksturo, sakot:

“(U) neatpazītās vai neanimējamās īpašības ir jāglabā sarakstā, lai saglabātu indeksu atbilstību.”

Izmantojot vērtību nonevai universālos atslēgvārdus inheritvai initial, šīs vērtības nevar izmantot kā daļu no komatiem atdalīta saraksta, pretējā gadījumā tas radīs sintakses kļūdu un visa rindiņa tiks ignorēta.

Lai nodrošinātu saderību visās atbalstītajās pārlūkprogrammās, ir nepieciešami piegādātāja prefiksi, un standarta sintakse tiek pasludināta par pēdējo:

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

IE10 (pirmā stabilā IE versija, kas atbalsta transition-property) -ms-prefikss nav nepieciešams .

Pārlūka atbalsts

Chrome Safari Firefox Opera IE Android iOS
Darbi Darbi 4+ 10,5+ 10+ 2.1+ 3.2+