檢查元素是否具有CSS動畫

Question

我有一個腳本，當css3動畫觸發jQuery中的AnimationEnd時，該腳本會刪除元素。 問題是這些動畫綁定到可能不包含的外部css文件。

現在我叫這個。

$element.one('webkitAnimationEnd oanimationend msAnimationEnd animationend', function(event) {
    $(this).remove();
});

但是，如果元素不具有動畫，因為瀏覽器不支持該動畫或不包含動畫文件，我仍然需要刪除該元素。 我如何檢查是否被調用。

我已經嘗試過了，但是似乎並沒有將值更改為true。

var hasAnimation = false;
$element.one('webkitAnimationStart oanimationstart msAnimationStart animationstart', function(event) {
        hasAnimation = true;
});
if (!hasAnimation) {
        $element.remove();
}

Answer 1

您在動畫開始之前檢查hasAnimation ，因為您沒有放棄“時間片”。 （那是錯誤的術語，但是我認為“時間片”只是描述發生了什么事情）

AFAIK沒有Javascript實現是-preemtive-多線程的，至少不是在腳本級別。 因此，如果您循環播放，則循環播放，則什么也沒有發生。

想象一下將函數放在隊列中的事件，這些事件被一個接一個地觸發/調用。 乖。 因此，如果您想知道此類事件的結果，則必須結束當前函數（稱其為放棄時間片）。 現在該活動開始-並且是唯一的活動。

因此，如果使用setTimeout(0)將cleanup_if_no_animation( hasAnimation )排隊，只要StartAnimation本身沒有用setTimeout觸發，您就不會真正玩弄時間，您只是放棄，然后在（可選的start事件）之后重新開始

如果您想得出1000，然后將其放入DIV中，則會遇到相同的情況。 您必須在步驟之間使用setTimeout（0）來更新顯示。

像這個例子

function bad_loop() {
    for (i = 1; i < 100; ++i) {
        $('#out').text(i)
    } }

function good_loop(i = 1) { 
    $('#out').text(i)
    if (i<50) setTimeout(good_loop,0,i+1) }