Bagaimanakah Saya Memohon Berbilang Peralihan CSS kepada Elemen Tanpa Konflik?

Berbilang Peralihan CSS pada Elemen

Apabila menggunakan berbilang peralihan CSS pada elemen, anda mungkin menghadapi konflik apabila satu sifat menimpa animasi satu lagi.

Pertimbangkan CSS berikut coretan:

.nav a {
  ...
  transition: color .2s linear, text-shadow .2s linear;
}

Dalam contoh ini, animasi bayang teks akan menimpa animasi warna. Untuk menyelesaikan isu ini dan mendayakan animasi serentak, hadkan koma sifat peralihan:

.nav a {
  ...
  transition: color .2s linear, text-shadow .2s linear;
}

Sebagai alternatif, anda boleh menggunakan sifat peralihan trengkas bersama-sama dengan sifat peralihan, tempoh peralihan dan fungsi pemasaan peralihan untuk menentukan parameter animasi:

.nav a {
  ...
  transition-property: color, text-shadow;
  transition-duration: .2s;
  transition-timing-function: linear;
}

Pendekatan ini menawarkan fleksibiliti yang lebih besar dan membolehkan anda mengawal tetapan animasi untuk sifat individu.

Atas ialah kandungan terperinci Bagaimanakah Saya Memohon Berbilang Peralihan CSS kepada Elemen Tanpa Konflik?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!