animationiteration

Question

我遇到了一个问题。我有一个7000毫秒的setInterval函数可以完成一件小事，并且还有一个设置为7s的css3关键帧动画。最初它完全同步运行，但在几次循环/动画时间后，它们开始越来越不同步。所以我想知道setInterval函数中的7000设置与css3关键帧动画中设置的7s相同，或者它们是否不同，因此会导致这种不正常化？

这是一个示例jsFidle（由于某种原因，它有时会表现不同）

使用setInterval的jQuery动画：

function opacity() {
        $('#jQuery').animate({opacity: 0}, 100);
        $('#jQuery').animate({opacity: 1}, 100);
    }
    setInterval(opacity, 1000);

css关键帧动画：

@-webkit-keyframes test {
  0%, 100%  {  opacity: 0; }
  10%, 90%  {  opacity: 1; }
}
@-moz-keyframes test {
  0%, 100%   {  opacity: 0; }
  10%, 90%    {  opacity: 1; }
}
@-o-keyframes test {
  0%, 100%   { opacity: 0; }
  10%, 90%   {  opacity: 1; }
}
@keyframes test {
  0%, 100%   { opacity: 0; }
  10%, 90%  { opacity: 1; }
}

Answer 1

JavaScript可以侦听CSS动画并具有不同的事件：

animationiteration
animationstart
animationend

在您的情况下，由于您有无限次迭代，因此您正在寻找animationiteration：

animationiteration

动画的迭代结束时会触发animationend事件。动画迭代计数为1的动画不会发生此事件。

MDN Documentation

请注意，这些事件的浏览器前缀为：

W3C standard         |   Firefox              |   webkit                     |   Opera                 |   IE10
animationstart       |   animationstart       |   webkitAnimationStart       |   oanimationstart       |   MSAnimationStart
animationiteration   |   animationiteration   |   webkitAnimationIteration   |   oanimationiteration   |   MSAnimationIteration
animationend         |   animationend         |   webkitAnimationEnd         |   oanimationend         |   MSAnimationEnd

如果您想在做某事之前等待MS号码，也可以添加jQuery delay。

最终代码如下所示：

$('#css').on('animationiteration webkitAnimationIteration oanimationiteration   MSAnimationIteration', function(){
        $('#jQuery').delay(250)//If you need any kind of delay
        .animate({opacity: 0}, 100)
        .animate({opacity: 1}, 100);
})

Fiddle

使用jQuery setInterval同步css关键帧动画

1 个答案:

animationiteration