Die CSS-Animation wird beim Zurücksetzen der Klasse nicht neu gestartet

Ich verwende CSS-Shader + Animation. Meine Shader-Klasse ist wie folgt definiert:

.shader{
-webkit-filter :custom(url(v.vs) mix(url(f.fs) multiply destination-over), 200 200);
-webkit-animation-name: test;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: 1
}

Ich versuche, die Stile (Shader + Animation) dynamisch mit jquery through zu setzen/zu löschen $('#holder').addClass('shader'); und $('#holder').removeClass('shader');

Das Seltsame ist jedoch, wenn ich die Klasse zurücksetze (z. B. addClass nach removeClass aufrufe), wird nur der Shader erneut angewendet, die Animation jedoch nicht (ich habe das AnimationStart-Ereignis verknüpft, um zu sehen, wann meine Animation beginnt). Weiß jemand warum das so ist und wie ich es lösen kann?

Bearbeiten: Ich habe eine vereinfachte Version des JSfiddle-Snippets hinzugefügt Hier. Im Wesentlichen wende ich die Animation zweimal auf ein div an, aber die eigentliche Animation wird nur beim ersten Mal aufgerufen.

Das Problem besteht darin, dass Sie die animierte Klasse zwar entfernen und dann erneut anwenden, dies jedoch im Rahmen einer einzigen blockierenden Funktion tun. Wenn Ihre Funktion beendet wird, scheint es für die Rendering-Engine, dass sich nichts geändert hat.

Eine Lösung (die von Ihnen gewählte) besteht darin, das Element zu klonen und das Original zu zerstören. Das ist in Ordnung, aber wenn Sie Ereignisbindungen zum ursprünglichen Element hatten (glaube ich), 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 erneut anwendet, innerhalb eines Aufrufs von setTimeout() mit einer sehr kleinen Verzögerung einzuschließen, z

$('#holder').removeClass('shader');
setTimeout(
    function(){$('#holder').addClass('shader')}
    , 1);

Ich habe Ihr jsfiddle so angepasst, dass es diesen Ansatz verwendet: http://jsfiddle.net/HuFBN/7/

Laut einer 2011 Artikel Auf css-tricks.com startet das Auslösen eines Reflows zwischen dem Entfernen und Hinzufügen der Klasse die Animation neu. Beispiel (ausführlich):

$('#holder').removeClass('shader');
$('#holder').offsetWidth = $('#holder').offsetWidth; // triggers reflow
$('#holder').addClass('shader'); // restarts animation

Ich glaube, ich habe es herausgefunden. Gemäß Dies, kann die CSS-Animation nicht zweimal auf denselben Knoten angewendet werden (selbst wenn Sie eine andere Animation haben!). Also musste ich den Knoten klonen, das Original entfernen und den geklonten Knoten wieder hinzufügen.

Sie müssen Ihr Element neu erstellen.

function resetAnimation(jqNode) {
   var clone = jqNode.clone();
   jqNode.after( clone );
   jqNode.remove();
   jqNode[0] = clone[0];
}

Versuchen Sie, dies direkt nach dem Anwenden der Animation zu verwenden – vorausgesetzt, “e” ist Ihr animiertes Element:

e.outerHTML = e.outerHTML;

Möglichkeit, einen Reflow auszulösen:

  element.classList.remove("class");
  element.scrollBy(0, 0);
  element.classList.add("class");

arbeitet im strikten Modus! erfordert keine Schreiboperation für einen schreibgeschützten Wert! erfordert keine ganz neue Funktion! eine Zeile und los! 🙂

Über Kritik an meiner Methode würde ich mich freuen requestAnimationFrame da ich sonst niemanden sehe, der es benutzt:

element.classList.add("class");
window.requestAnimationFrame(() => element.classList.remove("class"));