animate.css 并删除元素答案

【问题标题】：animate.css and remove the elementanimate.css 并删除元素
【发布时间】：2017-05-24 13:57:24
【问题描述】：

我想显示我拥有的动画并从 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();
    }
  });
}

请忽略我没有在 ${} 中使用反引号，我知道我需要它们！

【问题讨论】：

标签： javascript jquery html css animate.css

【解决方案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();
});

【讨论】：