让动画多次运行

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对象中移除。

至于点击操作，您的方法是正确的。

希望有所帮助。