Question

如果我这样做：

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

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);
});

Answer 2

是的，看起来像是时间问题。 css-tricks有解决方案：重新加载页面上的元素。 http://css-tricks.com/restart-css-animation/

由于我讨厌使用计时器和延迟，它看起来像这样：

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

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

   newone.addClass('change');

 });

Answer 3

我的做法是这样的。当页面加载时，

$('h1, h2, h3, li').each(function() {
    if (isScrolledIntoView(this) === true) {
      $(this).addClass('animate__animated');
      $(this).addClass('animate__bounceIn');
    } else {
      $(this).removeClass('animate__animated');
      $(this).removeClass('animate__bounceIn');
    }
  });

然后，我也有这个脚本，每次滚动条时都会运行：

 $(window).scroll(function() {
    $('h1, h2, h3, li').each(function() {
      if (isScrolledIntoView(this) === true) {
        $(this).addClass('animate__animated');
        $(this).addClass('animate__bounceIn');
      } else {
        $(this).removeClass('animate__animated');
        $(this).removeClass('animate__bounceIn');
      }
    });
 });

但是，不要在样式表中应用“animation-name”属性。如果您这样做，jQuery Scroll 函数仍会按预期删除和添加类，但是动画将不会运行，因为该元素将始终应用 'animate_animated'。所以，我的意思是，让 JAVASCRIPT 在页面加载时将动画类应用到任何你想要的地方（第一个 JS 片段）。不要在你的 css 中应用动画类。例如，您可以输入：

animation-duration: 6.5s;
animation-delay: 10.0s;

在您的样式表中。但不要放：

 animation-name: bounceIn;
  animation-duration: 1.5s;
  animation-delay: 0.5s;

在您的样式表中。

CSS3 animate不再在removeClass上播放，后跟addClass，而是在toggleClass上改变

3 个答案: