animate.css並刪除元素

Question

我想要顯示我擁有的動畫，並從DOM中刪除元素，但通過刪除this，動畫不顯示。

我已經嘗試使用setTimeout()函數，但因爲我需要針對一個特定的元素，我無法弄清楚如何讓兩個執行！

這裏是代碼：

function anagramHitsTheBottom() { 
    $('.anagram').each(function() { 
    const position = Math.round($(this).position().top); 
    if (position >= 450) { 
    console.log(lifeScore); 
    lifeScore -= 1; 
    $lives.html(Lives Left: ${lifeScore});//Not Working 
    $(this).css('color','red'); 
    $(this).addClass('animated hinge'); 
    $(this).remove(); 
    } 
    }); 
} 

請忽略我沒有在$ {}我知道我需要他們用反引號！

Answer 1

以下是您缺少的內容：您正在向元素添加動畫，並且同時將其從文檔中移除。

您可以使用此extension（滾動一點點向上）的jQuery

$.fn.extend({ 
animateCss: function (animationName, callback) { 
    var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend'; 
    this.addClass('animated ' + animationName).one(animationEnd, function() { 
     var obj = $(this); 
     obj.removeClass('animated ' + animationName); 
     if(callback && typeof callback === 'function') callback(obj); 
    }); 
    } 
}); 

這將使得動畫運行只是一個時間，然後你可以使用一個回調要刪除的元素。

$(this).animateCss('hinge', function (obj) { 
    //This will execute at the end of the animation 
    obj.remove(); 
});