CSS3animate不再在removeClass上播放,后跟addClass,而是在toggleClass上改变

如果我做:

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

CSS3 animate绑定到这个类只显示第一次.

.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

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

添加100毫秒的延迟似乎适用于Chrome/FF/IE.

更新的示例

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

如果您正在使用jQueryUI,您还可以使用以下内容:

这里的例子

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