CSS3 ożywione nie zagrać jeszcze raz na removeClass następnie addClass, ale ołtarze na toggleClass

Question

Jeśli zrobić:

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

CSS3 animate wiążą się z tej klasy pokazuje tylko za pierwszym razem.

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

kod w akcji: http://jsfiddle.net/adamovic/ato5akjx/

Po kliknięciu na przycisk kilka razy, animacja nie powtórzyć. Dlaczego?

Ale odtwarza się to co drugi raz, podczas korzystania z .toggleClass().

Przeglądarki Testowany: Chrome, Firefox

Answer 1

Wygląda na to, że musi być opóźnienie między dodanie/usunięcie klas.

Wydaje się, że dodanie opóźnienia 100ms działa w Chrome/FF/IE.

Updated Example

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

---

Jeśli używasz jQueryUI, można również użyć następujących:

Example Here

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

Answer 2

Tak, wygląda na to zagadnienie rozrządu. css-triki ma rozwiązanie: przeładuj element na stronie. http://css-tricks.com/restart-css-animation/

Ponieważ nienawidzę pracować z timerów i opóźnień, to będzie wyglądać mniej więcej tak:

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

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

    newone.addClass('change'); 

});