css動畫播放後jquery刪除類？

我有CSS代碼：css動畫播放後jquery刪除類？

body.start{-webkit-animation:srcb ease-in .4s 1;}

，當進入網站

，但問題是當動畫完成

的按鈕在我的網站是不是工作

只播放一次

如何在動畫完成後刪除機體類別「開始」

或刪除類別延遲x秒後呃動畫播放？

來源

2012-12-14 jk jk

您可以綁定到transitionend事件（對所有的人，實際上）：

$("body").on(
    "transitionend MSTransitionEnd webkitTransitionEnd oTransitionEnd", 
    function() { 
     $(this).removeClass("start"); 
    } 
);

如果你想實現一個延時，可以queue()清除類操作：

$("body").on(
    "transitionend MSTransitionEnd webkitTransitionEnd oTransitionEnd", 
    function() { 
     $(this).delay(1000).queue(function() { // Wait for 1 second. 
      $(this).removeClass("start").dequeue(); 
     }); 
    } 
);

注意：on()自jQuery 1.7以來才存在，如果您使用的是舊版本，則必須使用bind()而不是上面的代碼工作。

來源

2012-12-14 18:52:56

+1哇我不知道 –

@jkjk，你能詳細說明這是不是工作？處理程序是否在瀏覽器上運行？您是否已將代碼放置在「ready」處理程序或位於頁面底部的「

另一種方式也許？

$(window).load(function(){ 
    setTimeout(function(){ 
     $('body.start').removeClass('start') 
    }, 4000); 
});

來源

2012-12-14 18:52:41

謝謝，它的作品 –

這個工程，但理論上它更脆弱。如果您需要立即刪除該類（例如，如果您在點擊時進行動畫製作），這不如聽動畫結尾事件。 – Pirijan

下面是代碼：

var div = document.querySelector('div'); 

function callback() { 
    div.classList.remove('start'); // or modify div.className 
} 

div.addEventListener("webkitAnimationEnd", callback, false);

入住這live example上jsbin。

請注意，您的動畫和我的解決方案僅適用於基於webkit的瀏覽器。在生產環境中，您應該考慮其他瀏覽器和強制性提供無前綴解決方案。

來源

2012-12-14 18:58:56 dreame4

嘗試

webkitAnimationEnd oanimationend msAnimationEnd animationend

，而不是

transitionend MSTransitionEnd webkitTransitionEnd oTransitionEnd

這爲我工作。

來源

2013-03-29 11:24:32 zeno2k

這個答案更像是對已接受答案的評論。請解釋如何使用這些屬性，以便答案可以獨立。 –

$("#mydiv").removeClass("start", 
    function() { 
     alert("do something"); 
    });

來源

2017-07-20 21:02:36

相關問題

css動畫播放後jquery刪除類？

回答

相關問題