Question

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

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

anim函数首先从元素中删除该类，然后添加它，以便多次按下该按钮将继续运行动画。不幸的是，我发现没有用！也就是说，动画运行一次（仅限第一次），然后无法再运行。

在偶然发现的情况下，我发现在行console.log(element_name)中添加行3突然使其成功。

我对这种行为感到非常困惑，所以我尝试添加其他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);
}

Answer 1

这是因为javascript编译器尝试一次执行多个操作，因此您的类永远不会被删除！解决方案是对页面进行重排，你可以这样做：

json

将日志更改为该问题并解决问题！

javascript addClass和removeClass

1 个答案: