Bagaimana Cara Menggunakan Shorthand CSS Transition untuk Pelbagai Sifat dengan Betul?

Cara Menggunakan Shorthand Peralihan CSS dengan Berbilang Sifat

Shorthand peralihan CSS membolehkan anda menentukan berbilang sifat peralihan dalam satu pengisytiharan. Ini boleh berguna untuk mengurangkan jumlah kod yang anda perlukan untuk menulis. Walau bagaimanapun, mencari sintaks yang betul boleh mencabar.

Sintaks Shorthand Salah

Coretan kod yang disediakan tidak betul menggunakan trengkas peralihan CSS:

.element {
  -webkit-transition: height .5s, opacity .5s .5s;
     -moz-transition: height .5s, opacity .5s .5s;
      -ms-transition: height .5s, opacity .5s .5s;
          transition: height .5s, opacity .5s .5s;
}

Masalahnya terletak pada parameter ketiga peralihan kelegapan. Anda tidak boleh menentukan kelewatan selepas tempoh tersebut.

Sintaks Shorthand Betul

Sintaxis yang betul untuk shorthand peralihan CSS dengan berbilang sifat adalah seperti berikut:

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

Perhatikan bahawa tempoh mesti datang sebelum kelewatan, jika yang terakhir ditentukan.

Contoh

Untuk mengalihkan kedua-dua ketinggian dan kelegapan elemen menggunakan trengkas, anda akan menulis:

.element {
  transition: height 0.5s, opacity 0.5s;
}

Sebagai alternatif, anda boleh mengalihkan semua sifat CSS elemen sekali gus:

.element {
  transition: all 0.5s;
}

Dengan menggunakan peralihan CSS ringkas, anda boleh memudahkan kod CSS anda dan mengurangkan jumlah masa yang diperlukan untuk menentukan peralihan.

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