Maison > interface Web > tutoriel CSS > le corps du texte

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

DDD
Libérer: 2024-11-12 22:54:02
original
540 Les gens l'ont consulté

How to Dynamically Create CSS @-keyframes Animations Based on Server Responses?

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);
    }
}
Copier après la connexion

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);
Copier après la connexion

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!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal