Ich benutze CSS Shader + Animation. Meine Shader-Klasse ist wie folgt definiert:
%Vor% Ich versuche, die Stile (Shader + Animation) dynamisch zu setzen / zu setzen, indem ich jquery über $('#holder').addClass('shader'); und $('#holder').removeClass('shader');
Das seltsame Ding ist jedoch, wenn ich die Klasse zurücksetze (z. B. addClass nach removeClass aufrufen), nur der Shader wird erneut angewendet, aber die Animation nicht (Ich habe das AnimationStart-Ereignis angehakt, um zu sehen, wann meine Animation startet). Wer weiß warum das so ist und wie kann ich das lösen?
Bearbeiten: Ich habe hier eine vereinfachte Version von JSfiddle Snippet hinzugefügt . Im Wesentlichen werde ich die Animation zweimal auf ein div anwenden, aber die tatsächliche Animation wird nur beim ersten Mal aufgerufen.
Ich denke, ich habe es herausgefunden. Laut diesem kann die CSS-Animation nicht zweimal auf denselben Knoten angewendet werden (auch wenn Sie einen anderen haben) Animation!). Also musste ich den Knoten klonen, das Original entfernen und den geklonten Knoten hinzufügen.
Das Problem besteht darin, dass Sie zwar die animierte Klasse entfernen und dann erneut anwenden, dies jedoch im Verlauf einer einzelnen blockierenden Funktion tun. Wenn die Funktion beendet wird, erscheint der Rendering-Engine, dass sich nichts geändert hat.
Eine Lösung (diejenige, die Sie gewählt haben) besteht darin, das Element zu klonen und das Original zu zerstören. Das ist in Ordnung, aber wenn Sie irgendwelche Eventbindungen an das ursprüngliche Element haben (ich denke), werden sie auch zerstört.
Ein anderer Ansatz besteht darin, die animierte Klasse aus dem Element zu entfernen und dann den Code, der die Klasse innerhalb eines setTimeout () -Aufrufs erneut anwendet, mit einer sehr kleinen Verzögerung zu umbrechen, z. B.
%Vor%Ich habe Ihre Datei optimiert, um diesen Ansatz zu verwenden: Ссылка
Versuchen Sie, dies zu verwenden, nachdem Sie die Animation angewendet haben - vorausgesetzt, dass "e" Ihr animiertes Element ist:
%Vor%Tags und Links javascript jquery css css3 webkit