Comment créer dynamiquement des animations CSS @-keyframes basées sur les réponses du serveur ?

Génération dynamique d'animations CSS @-keyframes

Scénario

Vous devez faire pivoter un div et l'arrêter à une position spécifique déterminée par une réponse du serveur . L'utilisation de JS natif pour la rotation et l'arrêt consomme des ressources CPU excessives.

Solution

Exploitez les animations CSS pour la rotation, mais nécessitez une classe définie dynamiquement pour spécifier la position d'arrêt :

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

Implémentation

Insérer dynamiquement des règles de feuille de style pour remplacer les précédentes styles :

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);

Remplacez A_DYNAMIC_VALUE par la position d'arrêt souhaitée (par exemple, "180deg") et ajoutez l'élément de style à l'en-tête du document pour appliquer l'animation de manière dynamique.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!