重新開始 CSS3 的動畫

最近寫專案遇到的問題,就是我用CSS3製作動畫,本來希望每次執行 event 的時候動畫可以重新開始,後來卻發現 CSS 的動畫一開始執行後就會執行到結束為止,這樣在製作上就會遇到一些問題。

理論上想說移除動畫的 class 後再加回去就可以了,可是實際上是失敗的。
  1. $("#box").click(function() {   
  2.   $(this).removeClass("run-animation").addClass("run-animation");   
  3. });  

後來知道要解決的方法是要複製原本的原件後再把舊的移除,動畫才可以順利重頭開始。
  1. $("#box").click(function() {          
  2.     var $box=$("#box").clone().removeClass('run-animation');   
  3.     $("#box").remove();   
  4.     $(container).append($box);   
  5.     $("#box").addClass('run-animation');   
  6. });  

這樣就沒問題,只是因為涉及到 DOM 的新增刪除,在手機上看會稍微鈍一下。

參考: Restart CSS Animation
Restart CSS Animation

留言