javascript - 动画结束后如何删除类(class)？

Question

请帮我解决这个问题。我有一个名为“选项”的按钮，如果单击它，我想向其添加类“.green”以启动动画。动画使按钮的背景变为绿色并开始将其淡入其原始颜色。但是，如果动画完成，我希望自动删除该类。这是必要的，因为如果您第二次添加该类，它就不再起作用了。我不喜欢使用“超时”功能。我遇到了一些麻烦，不能每次都工作。

下面我发布了一个指向我的代码的链接。

My Code

@keyframes correct {
  from { color:forestgreen; }
}

.green {
    -webkit-animation: correct 0.4s ease-out;
    -moz-animation: correct 0.4s ease-out;
}

Answer 1

您可以监听元素上的 animationend 事件。 More in this article .

基本上，假设 button 是您的按钮元素:

var handler = function() {
    button.removeEventListener("animationend", handler, false);
    // (Remove the class here)
};
button.addEventListener("animationend", handler, false);
// (Add the class here)

(...或 addEventListener 的 Angular 等效项。)您可能需要在该事件名称上添加 vendor 前缀，详情请参阅本文。

我怀疑您会想要删除处理程序(如上所示)，因为当然删除该类将启动另一个动画。