Use the addClass of jQuery to add css animation to div. The animation is played repeatedly, and some of the animationend is not triggered.

problem:
I have encountered a very strange problem. Under electron, I want to use animate.css to create a pop-up animation of the top notification. After fadeInDown, adds animation with addClass, I find that as long as the animation added first is not finished, the animation of both div will be played once to another new notification div, and the animationend of the previous div will not be triggered.

Code:

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;
        $("-sharpinfobar_" + t).animateCss("fadeInDown", function () {
            setTimeout(function () {
                $("-sharpinfobar_" + t).animateCss("fadeOutUp", function(){
                    $("-sharpinfobar_"+t).remove();
                });
            }, timeout);
        });
    } else {
        $("-sharpinfobar_" + infobar_id).animateCss("fadeInDown");
    }
    infobar_idPP;
}

if there are multiple infobar, at the same time, it looks like this in the last 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>

there will always be some infobar that cannot be closed automatically, and animationend cannot be triggered properly.

 $.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;
            },
        });

The

animateCss method says this.

is it possible that only one CSS animation can be played on a page? Is it necessary for me to change it to JS animation to achieve the corresponding effect