播放后移除“.animated”类,并在元素重新加载时将其添加回。纯Javascript

我有一个CSS“.animated”类,默认情况下在所有“抽屉包装器”元素上设置,如下所示:

<div class="drawer-wrapper animated">
foo
</div>

我制作了一个函数,在动画完成后立即删除这个“动画”类,因为动画状态在以后的z索引中会出现问题。到目前为止,我的功能正常工作。

但函数的第二部分不起作用:我希望将“动画”类重新添加到“抽屉包装器”中,以防其他事件将其切换到“display:none”。这样,当重新切换回“显示:块”时,动画可以再次播放,然后再次删除,依此类推。以下是我的javascript:

function remove_and_add_animation() {
    var i;
    var a = document.querySelectorAll(".drawer-wrapper");
    for (i = 0; i < a.length; i++) {
        a[i].addEventListener("webkitAnimationEnd", function(){
        this.classList.remove("animated")});
        a[i].addEventListener("animationend", function(){
        this.classList.remove("animated")});
        if (
        window.getComputedStyle(a[i]).display === "none"
        ) {
        a[i].classList.add("animated")
        }
    }
}
addEventListener("change", function() {remove_and_add_animation(); });

非常感谢你!!