讓動畫多次運行

Question

我有這個動畫，我希望能夠多次運行。這是我目前有的：JSFiddle。我希望能夠在每次按下按鈕時使「已完成」的事情出現。我試圖添加這樣的事情：

window.setTimeout(function(){ 
    $('#divProcessing').addClass('show'); 
    $('#divProcessing').removeClass('hidden'); 
}, 1000); 

但是，這使得我不想要的動畫「反向」。 （Example）。

Answer 1

這應該做的伎倆 http://jsfiddle.net/txqs3m6L/

什麼在這裏做了，在引入的另一個CSS類「動畫」：

.animate { 
    transition: all 500ms linear;  
} 

它被刪除後的動畫結束，以確保彈出沒有被動畫回來，並被默認重置。

轉換部分已從基本div對象中移除。

至於點擊操作，您的方法是正確的。

希望有所幫助。