Bagaimana untuk Membuat Animasi CSS @-keyframes Secara Dinamik Berdasarkan Respons Pelayan?

Menjana CSS @-keyframes Animasi Secara Dinamik

Senario

Anda perlu memutar div dan menghentikannya pada kedudukan tertentu yang ditentukan oleh respons pelayan . Menggunakan JS asli untuk putaran dan berhenti menggunakan sumber CPU yang berlebihan.

Penyelesaian

Manfaatkan animasi CSS untuk putaran, tetapi memerlukan kelas yang ditentukan secara dinamik untuk menentukan kedudukan berhenti:

@-webkit-keyframes spinIt {
    100% {
        -webkit-transform: rotate(A_DYNAMIC_VALUE);
    }
}
@-moz-keyframes spinIt {
    100% {
        -webkit-transform: rotate(A_DYNAMIC_VALUE);
    }
}

Pelaksanaan

Sisipkan peraturan lembaran gaya secara dinamik untuk mengatasi sebelumnya gaya:

var style = document.createElement('style');
style.type = 'text/css';
var keyFrames = '\
@-webkit-keyframes spinIt {\
    100% {\
        -webkit-transform: rotate(A_DYNAMIC_VALUE);\
    }\
}\
@-moz-keyframes spinIt {\
    100% {\
        -webkit-transform: rotate(A_DYNAMIC_VALUE);\
    }\
}';
style.innerHTML = keyFrames.replace(/A_DYNAMIC_VALUE/g, "180deg");
document.getElementsByTagName('head')[0].appendChild(style);

Ganti A_DYNAMIC_VALUE dengan kedudukan henti yang diingini (cth., "180deg") dan tambahkan elemen gaya pada kepala dokumen untuk menggunakan animasi secara dinamik.

Atas ialah kandungan terperinci Bagaimana untuk Membuat Animasi CSS @-keyframes Secara Dinamik Berdasarkan Respons Pelayan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!