Bagaimanakah Saya Boleh Meluluskan Pembolehubah JavaScript kepada Animasi CSS?

Melalukan Pembolehubah kepada Animasi CSS dengan JavaScript

Apabila bekerja dengan animasi CSS, keupayaan untuk menghantar nilai sebagai parameter daripada JavaScript boleh menjadi sangat berguna. Ini membolehkan pengalaman yang dinamik dan interaktif.

Penyelesaian: Pembolehubah CSS

Dalam CSS, menggunakan pembolehubah membolehkan pemindahan nilai daripada JavaScript kepada animasi. Contohnya:

.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%;
  }
}

Pelaksanaan dalam JavaScript

Menggunakan JavaScript, anda boleh menetapkan pembolehubah ini:

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

Contoh Penggunaan

Ini akan ubah animasi elemen dengan kelas "p2":

<p class="p1">
 This will not animate as the animation will use the default value set to the variable
</p>
<p class="p2">
  This will animate because we changed the CSS variable using JS
</p>

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Meluluskan Pembolehubah JavaScript kepada Animasi CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!