Bagaimanakah Saya Boleh Menggunakan Pembolehubah JavaScript untuk Menetapkan Nilai Kerangka Kunci WebKit secara Dinamik?

Gunakan JavaScript untuk Menetapkan Nilai Kerangka Kunci Webkit dengan Pembolehubah

Anda menghadapi cabaran biasa apabila cuba menggunakan nilai rawak yang dijana dalam JavaScript untuk Animasi CSS. Pembolehubah JavaScript tidak boleh disuntik terus ke dalam kerangka utama CSS.

Sebaliknya, anda perlu mencipta peraturan CSS secara dinamik melalui JavaScript dan memasukkannya ke dalam Model Objek CSS (CSSOM).

Dinamik Penciptaan Kerangka Kunci

Ikuti langkah ini untuk mencipta dan memanipulasi bingkai kunci secara dinamik:

1. Buat objek animasi bingkai utama yang diingini menggunakan kaedah window.document.createElement(). Objek ini akan berfungsi sebagai bekas untuk definisi bingkai utama anda.
2. Tentukan bingkai utama sebenar menggunakan kaedah keyframes.insertRule(). Kaedah ini mengambil dua parameter: peratusan bingkai utama dan peraturan CSS untuk peratusan itu.
3. Masukkan animasi bingkai kunci yang baru dibuat ke dalam CSSOM menggunakan kaedah sheet.insertRule().

Contoh

Berikut ialah contoh yang mencipta dan menulis ganti sedia ada secara dinamik animasi bingkai kunci dengan nilai putaran rawak:

function createRandomRotation(dogValue) {
  // Create the keyframe animation object
  let rotateAnimation = window.document.createElement('style');

  // Define the actual keyframes
  rotateAnimation.innerHTML = `
    @-webkit-keyframes rotate {
      0% {-webkit-transform: rotate(-${dogValue});}
      100% {-webkit-transform: rotate(${dogValue});}
    }

    #dog {
      -webkit-animation: rotate 5s infinite alternate ease-in-out;
    }
  `;

  // Insert the keyframe animation into the CSSOM
  window.document.head.appendChild(rotateAnimation);
}

Penggunaan

Anda boleh menggunakan fungsi ini untuk terus mengemas kini bingkai kunci putaran dengan nilai rawak. Sebagai contoh, anda boleh mempunyai butang yang mencetuskan peristiwa klik untuk menjana darjah rawak baharu dan mengemas kini bingkai utama dengan sewajarnya.

Ingat untuk menggantikan dogValue dengan nilai ijazah yang dijana secara rawak anda.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menggunakan Pembolehubah JavaScript untuk Menetapkan Nilai Kerangka Kunci WebKit secara Dinamik?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!