Rumah >hujung hadapan web >tutorial css >Bolehkah JavaScript Mengubah Suai Parameter Animasi CSS Secara Dinamik?
Soalan:
Dalam kod animasi CSS yang disediakan, adakah mungkin untuk mengubah suai secara dinamik margin-kiri dan nilai lebar melalui JavaScript?
p { animation-duration: 3s; animation-name: slidein; } @keyframes slidein { from { margin-left: 100%; width: 300%; } to { margin-left: 0%; width: 100%; } }
Jawapan:
Ya, ada cara untuk menghantar nilai kepada animasi CSS daripada JavaScript dengan menggunakan pembolehubah CSS.
.p1,.p2 { animation-duration: 3s; animation-name: slidein; } @keyframes slidein { from { margin-left: var(--m, 0%); width: var(--w, 100%); } to { margin-left: 0%; width: 100%; } }
JavaScript:
// Set CSS variables using JavaScript document.querySelector('.p2').style.setProperty('--m','100%'); document.querySelector('.p2').style.setProperty('--w','300%');
Pendekatan ini membolehkan anda mengawal parameter animasi secara dinamik melalui JavaScript, membolehkan lebih fleksibiliti dan penyesuaian.
Atas ialah kandungan terperinci Bolehkah JavaScript Mengubah Suai Parameter Animasi CSS Secara Dinamik?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!