jquery - CSS3 动画不会在 removeClass 和 addClass 上再次播放，但会在 toggleClass 上改变

Question

如果我这样做:

jQuery('#test').removeClass("change");
console.log(jQuery('#test').attr("class"));
jQuery('#test').addClass("change");

CSS3 animate 绑定(bind)到此类仅在第一次显示。

.change {
  ...
  animation: redToTransparent 1s;
  animation-play-state: running;
  -webkit-animation: redToTransparent 1s;
  -webkit-animation-play-state: running;
}

实际代码: http://jsfiddle.net/adamovic/ato5akjx/

如果您多次点击按钮，动画不会重复。 为什么？

但它在使用 .toggleClass() 时每隔一秒播放一次。

测试的浏览器:Chrome、Firefox

Answer 1

看起来添加/删除类之间必须有延迟。

添加 100 毫秒的延迟似乎在 Chrome/FF/IE 中有效。

Updated Example

$('#mybutton').on('click', function () {
    $('#test').removeClass("change");
    setTimeout(function () {
        $('#test').addClass("change");
    }, 100);
});

---

如果您使用的是 jQueryUI，您还可以使用以下内容:

Example Here

$('#mybutton').on('click', function () {
    $('#test').removeClass("change").addClass("change", 100);
});