CSS3 belebtes spielt nicht wieder auf removeClass von addClass gefolgt, aber Abspaltungen auf toggleClass

Question

Wenn ich tun:

jQuery('#test').removeClass("change"); 
console.log(jQuery('#test').attr("class")); 
jQuery('#test').addClass("change"); 

CSS3 animate binden an diese Klasse zeigt nur erste Mal.

.change { 
    ... 
    animation: redToTransparent 1s; 
    animation-play-state: running; 
    -webkit-animation: redToTransparent 1s; 
    -webkit-animation-play-state: running; 
} 

-Code in Aktion: http://jsfiddle.net/adamovic/ato5akjx/

Wenn Sie auf die Schaltfläche ein paar Mal klicken, wird die Animation nicht wiederholt. Warum?

Aber es spielt jedes zweite Mal, wenn Sie .toggleClass() verwenden.

Browser getestet: Chrome, Firefox

Answer 1

Es sieht aus wie es zwischen dem Hinzufügen/Entfernen Klassen eine Verzögerung sein muss.

Eine Verzögerung von 100 ms scheint in Chrome/FF/IE zu funktionieren.

Updated Example

$('#mybutton').on('click', function() { 
    $('#test').removeClass("change"); 
    setTimeout(function() { 
     $('#test').addClass("change"); 
    }, 100); 
}); 

---

Wenn Sie jQueryUI verwenden, könnten Sie auch die folgenden verwenden:

Example Here

$('#mybutton').on('click', function() { 
    $('#test').removeClass("change").addClass("change", 100); 
}); 

Answer 2

Ja, sieht aus wie ein Timing-Problem. css-tricks hat die Lösung: Laden Sie das Element auf der Seite neu. http://css-tricks.com/restart-css-animation/

Da ich mit Timer und Verzögerungen arbeiten hasse, würde es in etwa so aussehen:

jQuery('#mybutton').click(function() { 

    newone = jQuery('#test').clone(true); 
    jQuery('#test').remove(); 
    jQuery('.container').append(newone); 

    newone.addClass('change'); 

});