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

このextensionを（少しスクロールアップ）使用することができます。

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