Bagaimanakah Saya Boleh Membuat Berbilang Peralihan CSS pada Satu Elemen Berfungsi Secara serentak?

Berbilang Peralihan CSS pada Elemen

Dalam CSS, peralihan membenarkan animasi yang lancar dengan menukar nilai sifat tertentu secara beransur-ansur dari semasa ke semasa. Walau bagaimanapun, apabila berbilang peralihan digunakan pada elemen yang sama, peralihan berikutnya mungkin menimpa yang sebelumnya.

Pertimbangkan coretan kod CSS berikut:

.nav a {
    text-transform:uppercase;
    text-decoration:none;
    color:#d3d3d3;
    line-height:1.5 em;
    font-size:.8em;
    display:block;
    text-align:center;
    text-shadow: 0 -1.5em 0 rgba(255, 255, 255, 0.15);
    -webkit-transition: color .2s linear;
    -moz-transition: color .2s linear;
    -o-transition: color .2s linear;
    transition: color .2s linear;
    -webkit-transition: text-shadow .2s linear;
    -moz-transition: text-shadow .2s linear;
    -o-transition: text-shadow .2s linear;
    transition: text-shadow .2s linear;
}

.nav a:hover {
    color:#F7931E;
    text-shadow: 0 1.5em 0 rgba(247, 147, 30, 0.15);
}

Dalam kod ini, kedua-dua warna dan sifat bayang teks mempunyai kesan peralihan yang ditentukan. Isunya ialah peralihan kedua menimpa yang pertama. Akibatnya, animasi bayang teks berlaku, tetapi animasi warna tidak berlaku.

Untuk menyelesaikan isu ini dan kedua-dua peralihan berfungsi serentak, gunakan sifat peralihan CSS bersama-sama. Begini caranya:

Sifat Peralihan Dibatasi Koma

Dalam semua penyemak imbas yang menyokong peralihan, sifat peralihan boleh dipisahkan koma. Dengan mengasingkan berbilang sifat dengan koma, kedua-dua peralihan boleh dicetuskan pada masa yang sama.

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

Tentukan Fungsi Pelonggaran

Secara lalai, peralihan menggunakan fungsi pemasaan mudah. Jika anda ingin menggunakan fungsi pemasaan yang berbeza, seperti linear, ia mesti dinyatakan dengan jelas.

transition: color .2s linear, text-shadow .2s linear;

Shorthand Sifat Transisi

Untuk pendekatan yang lebih bersih apabila menggunakan pemasaan dan fungsi pemasaan yang sama untuk berbilang sifat, gunakan sifat peralihan-* dan bukannya trengkas:

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

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Membuat Berbilang Peralihan CSS pada Satu Elemen Berfungsi Secara serentak?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!