javascript - 单击按钮时的 CSS 动画

Question

这是 plunker

$(document).ready(function(){
  $('#btn-animate').click(function(){
    animate();
  });
  $('#btn-remove').click(function(){
    $('.to-animate').removeClass('animate');
  });

  function animate(){
    $('.to-animate').removeClass('animate');
    $('.to-animate').addClass('animate');
  }
});

在这里，如果我单击“动画”按钮，它会向 div 添加一个“动画”类并为其设置动画(改变颜色)。但是，如果您再次单击，它会尝试删除“animate”类并将其添加回来，以便再次触发动画。

但这并没有发生。奇怪的是，如果我单击“删除”按钮删除“动画”类，然后使用“动画”按钮添加它再次设置动画的类。

谁能解释为什么第一个按钮没有给出所需的结果？每次单击“动画”按钮时如何触发动画？

Answer 1

通常，浏览器不会重绘 UI，直到所有 javascript 运行完毕，并且大多数浏览器足够聪明，可以判断出在第二次单击动画按钮后，DOM 前后相同，因此它不会做任何事。

最简单的解决方案是删除该类，然后设置超时以在短暂延迟后将其添加回来。

function animate(){
    $('.to-animate').removeClass('animate');
    setTimeout(function(){$('.to-animate').addClass('animate');}, 10);
}