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

Lesezeit: 3 Minuten

Die CSS Animation wird beim Zurucksetzen der Klasse nicht neu gestartet
Diskobbelt

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.

  • Haben Sie versucht, die Animationseigenschaften in einer separaten Klasse zu behalten, die nie entfernt wird?

    – bfavaretto

    17. April 13 um 3:31 Uhr

  • mmmm nein, aber ich glaube nicht, dass das helfen würde, da ich nur 1 Iteration habe und removeClass nach dem animationEnd-Ereignis aufrufe

    – Diskobbelt

    17. April 13 um 3:46 Uhr

  • Kannst du a posten jsFiddle damit wir es besser sehen können

    – apaul

    17. April 13 um 3:53 Uhr


  • Ein Beispiel für die Animation/den Filter in Aktion könnte hilfreich sein.

    – Bernie

    17. April 13 um 3:57 Uhr

  • Mögliches Duplikat von Restart animation in CSS3: Gibt es einen besseren Weg, als das Element zu entfernen?

    – Vivek Maharajh

    29. Juni 16 um 3:16 Uhr

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/

  • Dies ist die richtige Antwort. Zusätzliche Punkte gehen für die Erklärung, warum dieser Hack benötigt wird (“Wenn Ihre Funktion beendet wird, scheint es für die Rendering-Engine, dass sich nichts geändert hat”).

    – Agoston Horvath

    10. Juli 14 um 9:47 Uhr

  • Das hat bei mir funktioniert. Was ich auch daran mag, ist, dass Sie die Verzögerung bei diesem Ansatz einfach anpassen können, wenn es wieder beginnen soll. Danke!

    – Klewis

    10. November 15 um 17:18 Uhr

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

  • Anscheinend bricht dies im strikten Javascript-Modus.

    – Adam

    5. September 14 um 1:36 Uhr

  • @Adam Ich sehe nicht, wie dies den strengen Modus unterbricht. Hast du mehr Details?

    – feklee

    08.09.14 um 13:45 Uhr

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! 🙂

1642806066 334 Die CSS Animation wird beim Zurucksetzen der Klasse nicht neu gestartet
Koralle

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

.

581990cookie-checkDie CSS-Animation wird beim Zurücksetzen der Klasse nicht neu gestartet

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy