Javascript 在slideUp动画结束前再次触发函数时，动画会出现小故障

我使用下面的脚本（以及externalanimate.css），当我想显示一个特定的通知时，我会调用它。想法很简单；触发时，设置通知框的动画-（向下滑动）以及更改的通知消息。时间结束后，再次设置动画（向上滑动）。一切工作正常，除了在上一个调用正在制作动画时重新触发通知函数（在超时和向上滑动动画开始之间-请参阅代码中的注释）

其他代码资源：

css动画的Animate.css

anim（）

函数（来自animate.css的github页面）

---

如果要阻止并发动画，可以检查元素是否已具有

动画

类

if(document.querySelector(notif_orig).classList.contains("animated")){
  console.log("Concurrent animation prevented.")
}else{
  anim(notif_orig, 'slideInDown', function() {
  //...
}

---

当动画正在进行时。。。将

动画类添加到元素中。它将在动画结束时删除。因此，您可以使用它来阻止附加的
anim（）
调用。
function anim(element, animationName, callback) {
    const node = document.querySelector(element)
    node.classList.add('animated', animationName)

    function handleAnimationEnd() {
        node.classList.remove('animated', animationName)
        node.removeEventListener('animationend', handleAnimationEnd)

        if (typeof callback === 'function') callback()
    }

    node.addEventListener('animationend', handleAnimationEnd)
}

if(document.querySelector(notif_orig).classList.contains("animated")){
  console.log("Concurrent animation prevented.")
}else{
  anim(notif_orig, 'slideInDown', function() {
  //...
}