Wie erstelle ich dynamisch CSS-@-Keyframes-Animationen basierend auf Serverantworten?

Dynamisches Generieren von CSS-@-Keyframes-Animationen

Szenario

Sie müssen ein Div drehen und es an einer bestimmten Position stoppen, die durch eine Serverantwort bestimmt wird . Die Verwendung von nativem JS zum Drehen und Anhalten verbraucht übermäßige CPU-Ressourcen.

Lösung

Nutzen Sie CSS-Animationen für die Drehung, erfordern aber eine dynamisch definierte Klasse, um die Stoppposition anzugeben:

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

Implementierung

Stylesheet-Regeln dynamisch einfügen, um vorherige zu überschreiben Stile:

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

Ersetzen Sie A_DYNAMIC_VALUE durch die gewünschte Stoppposition (z. B. „180 Grad“) und hängen Sie das Stilelement an den Kopf des Dokuments an, um die Animation dynamisch anzuwenden.

Das obige ist der detaillierte Inhalt vonWie erstelle ich dynamisch CSS-@-Keyframes-Animationen basierend auf Serverantworten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!