Bagaimana untuk Menetapkan Nilai Putaran Animasi Kerangka Kunci WebKit Secara Dinamik Menggunakan JavaScript?

Nilai Kerangka Kunci Dinamik: Menggunakan Pembolehubah JavaScript dalam CSS

Soalan:

Bagaimana anda boleh secara dinamik menetapkan nilai putaran animasi kerangka utama Webkit menggunakan JavaScript pembolehubah?

Jawapan:

Dalam CSS, anda tidak boleh terus memasukkan pembolehubah JavaScript ke dalam animasi bingkai utama. Untuk mencapai matlamat ini, anda perlu mencipta peraturan CSS melalui JavaScript dan memasukkannya ke dalam Model Objek CSS (CSSOM).

Pertimbangkan kod contoh berikut:

@-webkit-keyframes rotate {
    0% {-webkit-transform: rotate(-10deg);}
    100% {-webkit-transform: rotate(10deg);}
}

#dog{
/*irrelevant settings*/
-webkit-animation: rotate 5s infinite alternate ease-in-out;
}

Untuk menetapkan secara dinamik nilai putaran, anda boleh menulis fungsi JavaScript:

// Assume var dogValue = "20deg";
var styleElement = document.createElement('style');
styleElement.type = 'text/css';
var keyframesRule = `@-webkit-keyframes rotate {
    0% {-webkit-transform: rotate(-${dogValue});}
    100% {-webkit-transform: rotate(${dogValue});}
}`;
styleElement.appendChild(document.createTextNode(keyframesRule));
document.head.appendChild(styleElement);

Kod ini mencipta elemen, tambahkan animasi bingkai utama padanya dan kemudian tambahkannya pada daripada dokumen tersebut. Animasi bingkai kunci yang dimasukkan akan mengatasi yang sedia ada, mengemas kini nilai putaran dengan berkesan.

Dengan mengikuti pendekatan ini, anda boleh menetapkan nilai bingkai kunci secara dinamik menggunakan pembolehubah JavaScript, memastikan peraturan CSS dikemas kini mengikut keperluannya.

Atas ialah kandungan terperinci Bagaimana untuk Menetapkan Nilai Putaran Animasi Kerangka Kunci WebKit Secara Dinamik Menggunakan JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!