问题：
我遇到了一个非常奇怪的问题，在electron下我想用animate.css做一个顶部通知弹出的动画效果，用的是fadeInDown，在用addClass添加动画之后，我发现只要先添加的动画还没有执行完，此时给另一个新的通知div添加动画的css class，这两个div的动画都会播放一次，而且之前那个div的animationend不会触发。

代码：

var infobar_id = 0;

//显示Infobar
function displayInfobar(type, text, timeout = 3000) {
    var html = "";
    switch (type) {
        case 'success':
            html += '<div class="infobar infobar-success" id="infobar_' + infobar_id + '"><i class="fa fa-check"></i><span>';
            html += text;
            html += '</span></div>';
            infobar_container.innerHTML += html;
            break;
        case 'warning':
            html += '<div class="infobar infobar-warning" id="infobar_' + infobar_id + '"><i class="fa fa-warning"></i><span>';
            html += text;
            html += '</span></div>';
            infobar_container.innerHTML += html;
            break;
        case 'error':
            html += '<div class="infobar infobar-error" id="infobar_' + infobar_id + '"><i class="fa fa-warning"></i><span>';
            html += text;
            html += '</span></div>';
            infobar_container.innerHTML += html;
            break;
        case 'info':
        default:
            html += '<div class="infobar infobar-info" id="infobar_' + infobar_id + '"><i class="fa fa-info-circle"></i><span>';
            html += text;
            html += '</span></div>';
            infobar_container.innerHTML += html;
            break;
    }
    //animate
    //timeout > 0则自动关闭，否则需要用户手动关闭
    if (timeout > 0) {
        //用t中转
        var t = infobar_id;
        $('#infobar_' + t).animateCss('fadeInDown', function () {
            setTimeout(function () {
                $('#infobar_' + t).animateCss('fadeOutUp', function(){
                    $('#infobar_'+t).remove();
                });
            }, timeout);
        });
    } else {
        $('#infobar_' + infobar_id).animateCss('fadeInDown');
    }
    infobar_id++;
}

如果同时存在多个infobar，最后container里是这样的：

<div class="container-infobar">
    <div class="infobar infobar-success animated fadeInDown" id="infobar_0"><i class="fa fa-check"></i><span>删除成功</span></div>
    <div class="infobar infobar-success animated fadeOutUp" id="infobar_1"><i class="fa fa-check"></i><span>删除成功</span></div>
</div>

始终会有一部分infobar不能自动关闭，animationend也不能正常触发。

 $.fn.extend({
            animateCss: function (animationName, callback) {
                var animationEnd = (function (el) {
                    var animations = {
                        animation: 'animationend',
                        OAnimation: 'oAnimationEnd',
                        MozAnimation: 'mozAnimationEnd',
                        WebkitAnimation: 'webkitAnimationEnd',
                    };

                    for (var t in animations) {
                        if (el.style[t] !== undefined) {
                            return animations[t];
                        }
                    }
                })(document.createElement('div'));
                
                console.log(this);

                this.addClass('animated ' + animationName).one(animationEnd, function () {
                    $(this).removeClass('animated ' + animationName);
                    console.log(this);
                    if (typeof callback === 'function') callback();
                });

                return this;
            },
        });

animateCss方法是这么写的。

难道一个页面上同样的CSS动画只能播放一个？我是否有必要改成JS动画来实现相应的效果