javascript - javascript addClass 和 removeClass 的异常行为

<分区>

我在玩 animate.css并构建了我自己的 Javascript 函数来触发动画事件。

这个非常简单的函数(通过按钮上的 onClick 事件触发)只有三(四)行长，但它遇到了一个真正令人难以置信的错误。

anim 函数首先从元素中删除类，然后添加它，以便多次按下按钮将继续运行动画。不幸的是，我发现它不起作用!也就是说，动画运行一次(仅第一次)，随后就无法运行。

偶然间，我发现在 3 行中添加 console.log(element_name) 行突然让它起作用了。

我对这种行为感到非常困惑，所以我尝试添加其他 console.log 行，但奇怪的是只有 console.log(element_name) 行有效!

为了确保它不是开发环境中的一个怪癖，我在 JSFiddle 中复制了它 here .

function anim(element_name){ //'animate' is a reserved keyword
    removeClass(element_name, 'bounceInDown');
    console.log(element_name); //Very cute behaviour!!! when I put this line here, it works, if i don't it doesnt.
    //console.log('a'); //Not all console.logs work
    addClass(element_name, 'bounceInDown');
}

function addClass(element, classname){
    element.classList.add(classname);
}

function removeClass(element, classname){
    element.classList.remove(classname);
}

最佳答案

那是因为 javascript 编译器尝试一次执行多个操作，所以您的类永远不会被删除! 解决方案是重排页面，您可以这样做，例如: