Peralihan-harta - Trik CSS

Anonim

The transition-propertyharta, biasanya digunakan sebagai sebahagian daripada transitiontrengkas, digunakan untuk menentukan apa harta, atau harta, anda ingin memohon kesan peralihan kepada.

Ini dilakukan dengan memberikan nama harta sebagai nilai:

.example ( transition-property: color; )

Nilainya boleh menjadi salah satu daripada yang berikut:

  • Satu nama harta tanah, seperti dalam contoh di atas
  • Senarai nama harta yang dipisahkan dengan koma (pendek atau longhand), untuk menukar beberapa sifat pada satu elemen
  • Kata kunci none, yang menunjukkan bahawa tidak ada harta yang akan beralih
  • Kata kunci all, yang menunjukkan bahawa semua sifat akan beralih (lalai)

Apabila koma memisahkan nilai-nilai, nama-nama harta dasarnya dipetakan kepada sifat-sifat peralihan lain ditakrifkan ( transition-timing-function, transition-duration, dan transition-delay). Jadi ini bermaksud jika senarai sifat yang dipisahkan dengan koma merangkumi satu atau lebih nama harta yang tidak sah, sifat yang lain masih akan beralih, dan akan memetakan ke sifat peralihan yang berkaitan.

Spesifikasi menerangkannya dengan mengatakan:

"(U) sifat yang tidak dikenali atau tidak bernyawa mesti disimpan dalam senarai untuk mengekalkan pemadanan indeks."

Apabila menggunakan nilai noneatau kata kunci universal inheritatau initial, nilai-nilai ini tidak dapat digunakan sebagai bagian dari senarai yang dipisahkan koma, jika tidak, ini akan menyebabkan kesalahan sintaks dan keseluruhan baris akan diabaikan.

Untuk keserasian dalam semua penyemak imbas yang menyokong, awalan vendor diperlukan, dengan sintaks standard yang dinyatakan terakhir:

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

IE10 (versi stabil pertama IE yang disokong transition-property) tidak memerlukan -ms-awalan.

Sokongan Penyemak Imbas

Chrome Safari Firefox Opera IE Android iOS
Berfungsi Berfungsi 4+ 10.5+ 10+ 2.1+ 3.2+