播放后删除“.animated”class，并在元素重新加载时将其添加回去。普通 Javascript

Question

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

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

我做了一个函数，一旦动画结束就删除这个“动画”class，因为动画状态稍后会在 z-index 上产生问题。到目前为止，我的功能有效。

但是我函数的第二部分不起作用：我希望将“动画”class 重新添加到“drawer-wrapper”，以防它切换为“显示：none" 由其他事件引起。这样，当它重新切换回“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(); });

非常感谢！！

Answer 1

你的第二部分代码是正确的，但是，你运行这段代码是错误的。您的代码的其他部分是通过 EventListener。你想什么时候添加 class“动画”？

播放后删除“.animated”class，并在元素重新加载时将其添加回去。普通 Javascript

Remove ".animated" class after play, and add it back in case element reloads. Plain Javascript

javascript

css

animation

event-listener