CSS3 animato non gioca di nuovo il removeClass seguiti da addClass, ma altera il toggleClass

Question

Se lo faccio:

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

CSS3 animate legano a questa classe mostra solo la prima volta.

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

Codice in azione: http://jsfiddle.net/adamovic/ato5akjx/

Se si fa clic sul pulsante un paio di volte, l'animazione non si ripete. Perché?

Ma suona ogni secondo quando si utilizza .toggleClass().

browser testati: Chrome, Firefox

Answer 1

Sembra che ci deve essere un ritardo tra l'aggiunta/rimuovere le classi.

L'aggiunta di un ritardo di 100 ms sembra funzionare in Chrome/FF/IE.

Updated Example

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

---

Se stai usando jQueryUI, si potrebbe anche utilizzare il seguente:

Example Here

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

Answer 2

Sì, sembra un problema di temporizzazione. css-tricks ha la soluzione: ricaricare l'elemento sulla pagina. http://css-tricks.com/restart-css-animation/

Dal Odio lavorare con timer e ritardi, sarebbe simile a questa:

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

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

    newone.addClass('change'); 

});