Question

我想制作一个按钮，所以每当我点击它时动画就会播放。但我遇到的问题是，当我点击按钮时，由于该类已经应用，因此动画无法播放。我想知道在动画完成后如何删除类。我知道这可以用jQuery完成，但我想知道如何使用常规的vanilla JavaScript来做到这一点。

Answer 1

另一种方法是

ELEMENT.classList.remove("CLASS_NAME");

对战

document.getElementById("whatever").className = "";

删除所有类，而不是 a 类

或许这个

div.classList.add("foo");
div.classList.remove("foo");

从Remove Class

了解详情

Answer 2

试试这个：

var btn = document.getElementsByClassName("yourBTNClass")[0]; // Your (N-1)th button
btn.onclick = function() {
   btn.className = "yourBTNClass"; // Setting the class back to what it was before
   animation(); // The function your animation takes place in
   btn.className = ""; // Reseting the class
}

希望你发现这个有用！：）

Answer 3

如果我正确理解了这个问题，听起来你想知道如何用javascript（而不是jQuery）修改特定元素的类。

我就是这样做的：

document.getElementById("elementId").className = "";

希望有所帮助！

编辑1

因此，听起来您希望在事件结束后自动删除该类，而不是删除该类的一些外部操作。

我认为最好的方法是为像jQuery这样的动画创建自己的eventListener函数。这是我发现的一个很好的例子：

function whichTransitionEvent(){
    var t;
    var el = document.createElement('fakeelement');
    var transitions = {
      'transition':'transitionend',
      'OTransition':'oTransitionEnd',
      'MozTransition':'transitionend',
      'WebkitTransition':'webkitTransitionEnd'
    }

    for(t in transitions){
        if( el.style[t] !== undefined ){
            return transitions[t];
        }
    }
}

/* Listen for a transition! */
var transitionEvent = whichTransitionEvent();
transitionEvent && e.addEventListener(transitionEvent, function() {
    console.log('Transition complete!  This is the callback, no library needed!');
});

来源：https://davidwalsh.name/css-animation-callback

Animate.CSS - 使用vanilla JavaScript在动画结束后删除类

3 个答案: