Bagaimana Menggunakan Shorthand Peralihan CSS dengan Betul untuk Pelbagai Sifat?

Peralihan CSS dengan Pelbagai Sifat: Penjelasan Sintaks Pendek

Sintaks trengkas peralihan CSS membolehkan kami mengalihkan berbilang sifat secara serentak. Walau bagaimanapun, sintaks yang disediakan dalam contoh yang diberikan adalah salah.

Struktur Sintaks Ringkas:

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

Nota: Tempoh mesti mendahului kelewatan jika kelewatan dinyatakan.

Shorthand Betul Sintaks untuk Contoh Diberi:

transition: height 0.5s, opacity 0.5s 0.5s;

Sintaks ini menunjukkan bahawa:

• Peralihan sifat ketinggian melebihi 0.5 saat.
• Peralihan sifat kelegapan lebih 0.5 saat, dengan kelewatan 0.5 saat.

Sintaks Ringkas:

Jika mengalihkan semua sifat secara serentak, anda boleh menggunakan sintaks trengkas dipermudahkan berikut:

transition: all 0.5s;

Contoh Kod dengan Betul Sintaks:

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

Kod yang dikemas kini ini kini seharusnya mengalihkan ketinggian dan kelegapan elemen dengan lancar.

Atas ialah kandungan terperinci Bagaimana Menggunakan Shorthand Peralihan CSS dengan Betul untuk Pelbagai Sifat?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!