使用 jQuery 循环和延迟无限 CSS3 动画答案

【问题标题】：Loop and delay infinite CSS3 animation using jQuery使用 jQuery 循环和延迟无限 CSS3 动画
【发布时间】：2016-05-31 19:31:22
【问题描述】：

我正在尝试在动画元素上添加和删除类以创建交错/延迟效果，因此一旦动画完成，它会添加一个动画输出类，然后一旦完成它就会重新启动该过程。

我正在使用 animate.css 制作动画。

我在这里创建了一个 jsFiddle：https://jsfiddle.net/3ozfgrh2/

如您所见，它可以很好地播放第一个“循环”，但随后它会过早/关闭删除/添加类。

var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
$('.sticker').on(animationEnd, function() {
    var $this = $(this);
    $this.removeClass('bounceIn').addClass('bounceOut').on(animationEnd, function() {
        setTimeout(function() {
            $this.removeClass('bounceOut').addClass('bounceIn');
        }, 1000);
    });
});

有什么想法吗？

【问题讨论】：

标签： jquery css animation

【解决方案1】：

由于您试图将 2 个不同的行为附加到同一个“onAnimationEnd”事件，因此代码似乎没有按预期工作。

您可以通过使用.off().“解开”animationEnd 事件中的任何事件来避免这种混淆在使用 .on() 附加新行为之前。

我已将您的代码拆分为两个单独的函数，以便您可以将它们设置为继续在循环中连续触发。

var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';

$('.sticker').on(animationEnd, addBounceOut);

function addBounceOut() {
    var $this = $(this);
    $this.removeClass('bounceIn').addClass('bounceOut').off(animationEnd).on(animationEnd, addBounceIn);
}

function addBounceIn() {
    var $this = $(this);
    setTimeout(function () {
        $this.removeClass('bounceOut').addClass('bounceIn').off(animationEnd).on(animationEnd, addBounceOut);
    }, 1000);
}

.sticker {
  display: inline-block;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center center;
  width: 12vw;
  height: 12vw;
  position: absolute;
  z-index: 1;
  animation-duration: 1s;
}

.sticker.one {
  background-color: orange;
  top: 7%;
  left: 15%;
  animation-delay: 1s;
}

.sticker.two {
  background-color: green;
  top: 14%;
  right: 11%;
  animation-delay: 2s;
}

.sticker.three {
  background-color: blue;
  top: 43%;
  right: 22%;
  animation-delay: 3s;
}

.sticker.four {
  background-color: red;
  top: 60%;
  left: 10%;
  animation-delay: 4s;
}

<link href="https://cdn.rawgit.com/daneden/animate.css/master/animate.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="sticker one animated bounceIn" href="#"></a>
<a class="sticker two animated bounceIn" href="#"></a>
<a class="sticker three animated bounceIn" href="#"></a>
<a class="sticker four animated bounceIn" href="#"></a>

【讨论】：