javascript - 如何在页面滚动后显示时对 CSS3 动画进行排队(提供的 JSFiddle)

Question

JSFIDDLE:http://jsfiddle.net/mh7e8/1/

我有 3 张图片，我想添加一个 .animation 类，这样它们就会弹跳显示:

<div class="row">
  <div class="col-sm-4 steps">
  <img src="./s3/img/sprite-circle-1.png" class="step-1 bounceIn">
  </div>

  <div class="col-sm-4 steps">
  <img src="./s3/img/sprite-circle-2.png" class="step-2 bounceIn">
  </div>

  <div class="col-sm-4 steps">
  <img src="./s3/img/sprite-circle-3.png" class="step-3 bounceIn">
  </div>
</div>

我已经有了一个非常好的(有效的)CSS3 动画:

.animated.bounceIn{
// code: see JSFIDDLE - http://jsfiddle.net/mh7e8/1/ for detail
}

我希望该类应用于每张图片，当第一张图片加载到屏幕上时，它们之间有 1 秒的延迟。

我有确定元素何时可见(有效)的代码:

(function ($) {

    $.fn.isVisible = function (partial, hidden, direction) {

 // working code: see JSFIDDLE - http://jsfiddle.net/mh7e8/1/ for detail


})(jQuery);
$(function () {

    var $bounceIn = $('.step-1');
    var testVis = function () {
        $bounceIn.each(function () {
            if ($(this).isVisible()) {
                console.log("step-1 visible");
            }

});
};

$(window).on('scroll resize', testVis);
testVis();
});

我正在努力寻找如何按顺序延迟每个动画。对 CSS 转换应用延迟似乎不会在浏览器中调用一致的行为(例如，第 2 步可以在第 1 步之前加载)。我如何在 jQuery 中将其排队？

Answer 1

您可以定义 CSS 动画并将它们附加到特定类。

CSS

.slideUp {
  animation: slide-up 1500ms ease;
}

JQUERY

/* these are the classes you want to animate */
toAnimate = ['step1', 'step2', 'step3']

/* iterate over this array and apply the *slideup* class */
$.each(toAnimate, function(i, class) {
  window.timeout(function {
    $('.parent').find(class).addClass('slideUp')
  }, i*1000);
}

现在，只需使用 jQuery 在适当的时间将这些类添加到元素(例如，延迟 1 秒，将 .slideUp 类添加到四个图像等)