代码之家  ›  专栏  ›  技术社区  ›  Ben Viatte

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

  •  0
  • Ben Viatte  · 技术社区  · 4 年前

    我有一个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(); });
    

    非常感谢你!!

    0 回复  |  直到 4 年前
        1
  •  1
  •   David YK Han    4 年前

    代码的第二部分是正确的,但是,运行代码的时间是错误的。 你想什么时候再添加“动画”类?