用jQuery的addClass給div添加css動畫，動畫反復播放，animationend有的不觸發(fā)

問題：
我遇到了一個非常奇怪的問題，在electron下我想用animate.css做一個頂部通知彈出的動畫效果，用的是fadeInDown，在用addClass添加動畫之后，我發(fā)現(xiàn)只要先添加的動畫還沒有執(zhí)行完，此時給另一個新的通知div添加動畫的css class，這兩個div的動畫都會播放一次，而且之前那個div的animationend不會觸發(fā)。

代碼：

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則自動關(guān)閉，否則需要用戶手動關(guān)閉
    if (timeout > 0) {
        //用t中轉(zhuǎn)
        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不能自動關(guān)閉，animationend也不能正常觸發(fā)。

 $.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動畫來實現(xiàn)相應的效果