播放后删除“ .animated”类，并重新添加以防元素重新加载纯Javascript

问题描述

我有一个CSS“ .animated”类，默认情况下，它在所有“ drawer-wrapper”元素上设置，如下所示：

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

我制作了一个函数，在动画结束后立即删除了该“动画”类，因为动画状态稍后会导致z-index出现问题。到目前为止，我的功能正常。

但是函数的第二部分不起作用：我希望将“动画”类重新添加到“抽屉包装”中，以防其他事件将其切换为“显示：无”。这样，当将其重新切换回“ display：block”时，动画可以再次播放，然后再次被删除，依此类推。这是我的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(); });

最感谢您！

解决方法

您的第二部分代码正确，但是，运行代码的时间错误。 您代码的其他部分是通过EventListener进行的。 您何时要添加“动画”类？