Question

我想添加和删除CSS类n次以显示动画，以显示效果n次，就像设置animation-iteration-count时一样，差异在于我有两个动画，第二个有延迟。

我的想法是使用setTimeout，所以我读了this Stack Overflow post，但我没有得到预期的结果。

这是一个片段 - 和JSfiddle - 带有动画（显示一次）

$('button').click(function(){
  $('div').addClass('a');
  
  $(this).attr('disabled','true').text('Started');
  
  setTimeout(function(){
    $('div').removeClass('a');
    
    $('button').removeAttr('disabled').text('Finished | Again');
  },6000);
});

div {
  width: 100px; height: 100px; background: red;
}

.a {
  animation: a 2s linear, b 2s 2s linear;
}

@keyframes a {
  from { background: red; }
  to { background: blue; }
}

@keyframes b {
  from { background: blue; }
  to { background: black; }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div></div>
<button>Start</button>

Answer 1

您可以使用setInterval并计算迭代次数。

var n = 3;
var iterationCount = 0;

$('button').click(function(){
clearInterval(animInterval);

var animInterval = setInterval(function(){
    $('div').toggleClass('a');
    iterationCount++;

    if (n == iterationCount)
        clearInterval(animInterval);
  },4000);
});

here

Answer 2

css方式

用js重复动画对我来说似乎不对。有(X > Y) & (Z <= Y)属性，并且有可能不添加多个animation-iteration-count，您应该能够实现您的目标。对于你的示例代码，它甚至非常简单（虽然我怀疑你的真实动画可能有点不同：

@keyframes

如果您无法通过css找到实现它的方法，请随意发布您的实际动画。 https://jsfiddle.net/brhL9h54/4/

js方式

如果你坚持使用js方式，你需要确保在每个周期后重置超时。这可以通过递归调用函数来完成。在计数器的帮助下，您可以轻松控制您希望它运行的次数。按顺序排列的东西：

.a {
  animation: a 2s linear 5 alternate;
}

@keyframes a {
  0% { background: red; }
  50% { background: blue; }
  100% { background: black; }
}

https://jsfiddle.net/brhL9h54/7/

Answer 3

您可以处理animationend事件。看看这段代码：

$('div').on('animationend', function (data) {
 if (data.originalEvent.animationName === 'b') {
  $('div').removeClass('a');
  iteration++;
  if (iteration < n) {
   setTimeout(function () {  $('div').addClass('a'); });
  } else {
   iteration = 0;
   $('button').removeAttr('disabled').text('Finished | Again');
  }
 }
});

有参数data.originalEvent.animationName，表示结束的动画名称。你的上一个动画是b。那么你必须删除类并再次添加它。您还必须保留当前迭代次数和最大交互次数。点击此处查看：https://jsfiddle.net/svnwmg3g/

Answer 4

以下是对小提琴的更新：

https://jsfiddle.net/jb03ba1f/2/

正如你所看到的，这将重复动画你想要多次，也可以容纳多个动画，但它有点乱。由于你已经在使用jQuery，我建议你研究一下jQuery的动画API，我认为它有更强大的回调功能，因为我几乎不使用jQuery，所以你必须深入研究它。

如果这不能涵盖您正在寻找的内容，也许您可以在线找到一个示例来更好地说明您的问题。

（js / jquery供参考 - 虽然我也更新了关键帧以添加另一个动画，所以看看小提琴）

$('button').click(function(){
    $('div').addClass('a');

  $(this).attr('disabled','true').text('Started');

  var n = 0;

  var interval = setInterval(function() {
    $('div').removeClass('a');

    if (n === 5) {
        clearInterval(interval);
        $('button').removeAttr('disabled').text('Finished | Again');
    } else {
      setTimeout(function() {
        $('div').addClass('a');
      }, 0)
      n++;
    }
  }, 4500);
});

如何使用setTimeout添加和删除CSS类n次？

4 个答案: