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

这是您缺少的内容：您正在将动画添加到元素，同时又将其从文档中删除。

您可以为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();
});