Bagaimanakah Saya Boleh Menggunakan Shorthand CSS untuk Peralihan Berbilang Sifat Secara serentak?

Mentransisikan Berbilang Sifat CSS dengan Shorthand

Dalam CSS, sifat peralihan menawarkan trengkas yang mudah untuk mengalihkan berbilang sifat secara serentak. Ini boleh memudahkan kod anda dan menjadikannya lebih ringkas. Untuk menggunakan trengkas, ikut sintaks ini:

transition: <property> || <duration> || <timing-function> || <delay> [, ...];

Perhatikan bahawa tempoh mesti mendahului kelewatan jika dinyatakan.

Menggunakan Peralihan Shorthand pada Sifat Tertentu:

-webkit-transition: height 0.3s ease-out, opacity 0.3s ease 0.5s;
-moz-transition: height 0.3s ease-out, opacity 0.3s ease 0.5s;
-o-transition: height 0.3s ease-out, opacity 0.3s ease 0.5s;
transition: height 0.3s ease-out, opacity 0.3s ease 0.5s;

Mengalih Semua Sifat:

Anda boleh mengalihkan semua sifat dengan trengkas berikut:

-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;

Contoh:

Pertimbangkan contoh berikut:

.element {
  transition: height 0.5s, opacity 0.5s 0.5s;
  height: 0;
  opacity: 0;
  overflow: 0;
}
.element.show {
  height: 200px;
  opacity: 1;
}

Dalam contoh ini, menambah kelas pertunjukan akan menyebabkan elemen itu menukar ketinggian dan kelegapannya secara beransur-ansur.

Nota: Keserasian peralihan adalah sangat baik (melebihi 94% secara global), jadi menggunakannya secara amnya selamat. Jika anda bimbang tentang keserasian, rujuk https://caniuse.com/css-transitions.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menggunakan Shorthand CSS untuk Peralihan Berbilang Sifat Secara serentak?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!