Bolehkah JavaScript Mengubah Suai Parameter Animasi CSS Secara Dinamik?

Mengparameterkan Animasi CSS dengan JavaScript

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!