Bagaimanakah Saya Boleh Menyesuaikan Parameter Animasi CSS Secara Dinamik?

Menyesuaikan Animasi CSS dengan Nilai Parameter

Animasi CSS yang disediakan menetapkan tempoh dan parameter untuk elemen yang meluncur masuk dari sebelah kiri. Walau bagaimanapun, bagaimana jika anda ingin menyesuaikan parameter ini secara dinamik berdasarkan konteks?

Satu cara untuk mencapai ini ialah dengan menggunakan pembolehubah CSS. Begini caranya:

p {
animasi-tempoh: 3s;
animation-name: slidein;
}

@keyframes slidein {
from {

margin-left: var(--m, 0%);
width: var(--w, 100%);

}

kepada {

margin-left: 0%;
width: 100%;

}
}

Kini, menggunakan JavaScript, anda boleh menetapkan nilai untuk --m (margin-kiri) dan --w (lebar) seperti ini:

document.querySelector('.p2').style.setProperty('--m', '100%');
document.querySelector('.p2').style.setProperty('--w', '300%');

Ini membolehkan anda mengawal parameter animasi untuk elemen tertentu secara dinamik.

Sebagai contoh, pertimbangkan dua perenggan dengan nama kelas "p1" dan "p2":

.p1,.p2 {
animasi-tempoh: 3s;
animasi-nama: slaid;
}

Ini akan tidak bernyawa kerana animasi akan menggunakan nilai lalai yang ditetapkan kepada pembolehubah

Ini akan bernyawa kerana kami menukar pembolehubah CSS menggunakan JS

Perenggan pertama tidak akan bernyawa kerana ia menggunakan nilai lalai untuk --m dan --w. Perenggan kedua, bagaimanapun, akan bernyawa mengikut parameter tersuai yang ditetapkan dalam JavaScript.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menyesuaikan Parameter Animasi CSS Secara Dinamik?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!