使用jquery動畫css：缺少後續的interations

Question

我想在另一個元素上點擊畫布菜單設置動畫。一旦按鈕被點擊，這樣的畫布菜單就會變成動畫。我下面的代碼：

（https://jsfiddle.net/shredder11/fhqsmhdz/13/）

問題：

$(".ok_3").click(function() { 

    $(".ok_1").css("right", "90%") 
    $(".ok_1").css("left", "0px") 
    $(".ok_1").css("z-index", "1") 
    $(".ok_2").css("opacity", "0.4") 

}); 

$(document).mouseup(f_1); 

一次我經過一個週期運行（點擊，菜單出現動畫，點擊出來，使其消失），我再次點擊在按鈕上，動畫不再存在。我不會在任何地方去課，所以班級應該仍然在那裏

Answer 1

你是完全正確的，你沒有刪除班級，它仍然存在！

運行一次的CSS動畫將在類添加到元素時運行，然後不再運行，除非動畫類從該DOM中移除並添加到DOM。

無限重複的動畫顯然會無休止地運行。帶有迭代的動畫將針對指定的迭代量運行，但爲了再次觸發該迭代動畫，您將刪除該類並將其添加到該元素。

在刪除動畫和重新添加動畫之間需要稍稍延遲，因此您最好的選擇是檢查animationend事件並在此時刪除該類。或者，刪除該課程，然後使用setTimeout()添加延遲。不要連鎖removeClass("fadeInLeft").addClass("fadeInLeft")，因爲不會有延遲。