Bagaimanakah Saya Boleh Menggunakan Shorthand CSS Transition untuk Pelbagai Sifat dengan Cekap?

Catatan Transisi CSS untuk Berbilang Sifat

Dalam CSS, trengkas peralihan membolehkan anda menggabungkan berbilang sifat peralihan menjadi satu pengisytiharan. Walau bagaimanapun, apabila menggunakannya dengan berbilang sifat, adalah penting untuk mengikut sintaks yang betul.

Sintaks

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

Perhatikan bahawa tempoh mesti mendahului kelewatan, jika dinyatakan.

Menggabungkan Peralihan Individu

Untuk menggabungkan peralihan individu, gunakan yang berikut sintaks:

-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

Sebagai alternatif, anda boleh mengalihkan semua sifat secara serentak:

-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 .5s;
}

Dalam contoh ini, kedua-dua ketinggian dan kelegapan akan beralih lebih dari 0.5 saat, tetapi peralihan kelegapan akan berlengah selama 0.5 saat lagi.

Keserasian

Shorthand peralihan disokong secara meluas dalam penyemak imbas moden. Rujuk http://caniuse.com/css-transitions untuk maklumat keserasian terperinci.

Kesimpulan

Stangkas peralihan CSS memudahkan pengisytiharan berbilang peralihan, membolehkan anda mengawal animasi CSS hartanah dengan lebih cekap. Ingat untuk mengikut sintaks yang betul dan gunakan awalan untuk keserasian merentas pelayar.

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