Jquery CSS3动画不'；t在removeClass和addClass上再次播放，但在toggleClass上更改

如果我这样做：

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

CSS3

animate

bind to this class仅第一次显示

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

正在运行的代码：

如果单击按钮几次，动画不会重复。 为什么？

但当使用

.toggleClass（）

时，它每秒播放一次

---

测试的浏览器：Chrome、Firefox

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

在Chrome/FF/IE中增加100毫秒的延迟似乎是可行的

---

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

---

是的，看起来是个时间问题。css技巧有一个解决方案：在页面上重新加载元素

因为我不喜欢与计时器和延迟一起工作，所以看起来是这样的：

jQuery('#mybutton').click(function() {

   newone = jQuery('#test').clone(true);
   jQuery('#test').remove();
   jQuery('.container').append(newone);

   newone.addClass('change');

 });

---

你认为

.toggleClass（）

与同时调用

.addClass（）

和

.removeClass（）

是一样的吗？你链接的css技巧文章似乎有了一个新的解决方案，通过测量

偏移网络宽度来强制回流。我不知道这与您的解决方案在性能方面有什么区别，但回流版本似乎更容易。
$('#mybutton').on('click', function () {
    $('#test').removeClass("change").addClass("change", 100);
});

jQuery('#mybutton').click(function() {

   newone = jQuery('#test').clone(true);
   jQuery('#test').remove();
   jQuery('.container').append(newone);

   newone.addClass('change');

 });