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();
});

animate.css并删除元素

1 个答案: