使用暂停在循环中单独动画Div

Question

我正试图获得一个循环动画，每个框都单独显示。为了让您更好地了解动画应该如何工作：

没有显示＆gt;红框动画显示，显示5秒钟> Red Box动画出来＆gt;暂停10秒>绿箱动画，显示5秒钟>等

我设法用一种复杂的JQuery函数完成了这个，所以我希望在这里发帖，看看有没有更简单的方法来做到这一点。

Link to JS Fiddle (The JS in this link is not working, but you can see what I started with)

HTML

<div id="container">
    <div id="red" class="box"></div>
    <div id="green" class="box"></div>
    <div id="blue" class="box"></div>
</div>

CSS

.box {
    width: 200px;
    height: 200px;
    animation: box .6s ease-in;
}

#red {
    background: red;
}

#green {
    background: green;
}

#blue {
    background: blue;
}

@keyframes box {                                                            
  0% {opacity: 0;transform: translateY(-40px);}
  100%{opacity: 1;transform: translateY(0px);}
}

Answer 1

您可以使用以下逻辑使用递归方法处理它：

var $boxes = $('.box');

(function animateBox(i) {
    $boxes.eq(i).addClass('animate').one('animationend', function () {
        setTimeout(function () {
            $(this).hide().show(0).addClass('reverse').one('animationend', function () {
                $(this).removeClass('animate');
                if(++i < $boxes.length) setTimeout(animateBox, 10000, i);
            });
        }.bind(this), 5000);
    });
})(0);

.box.animate {
    width: 200px;
    height: 200px;
    animation: box .6s ease-in;
}
.box.animate.reverse {
    animation-direction: reverse;
}
#red {
    background: red;
}
#green {
    background: green;
}
#blue {
    background: blue;
}
@keyframes box {
    0% {
        opacity: 0;
        transform: translateY(-40px);
    }
    100% {
        opacity: 1;
        transform: translateY(0px);
    }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="container">
    <div id="red" class="box"></div>
    <div id="green" class="box"></div>
    <div id="blue" class="box"></div>
</div>

这里是无限循环：

(function animateBox(i) {
    $boxes.eq(i).addClass('animate').one('animationend', function () {
        setTimeout(function () {
            $(this).hide().show(0).addClass('reverse').one('animationend', function () {
                $(this).removeClass('animate reverse');
                setTimeout(animateBox, 10000, ++i < $boxes.length ? i : 0);
            });
        }.bind(this), 5000);
    });
})(0);

-jsFiddle sample-

（延迟时间较短）

Answer 2

使用jQuery承诺可以很容易地完成：

var p = $.Deferred().resolve().promise();

$('div.box').each(function(i, div) {
  p = p.then(function() {
    $(div).fadeIn().delay(5000).fadeOut().delay(1000);
    return $(div).promise();
  });
});

＆＃13;

＆＃13;

.box {
  display: none;
  width: 200px;
  height: 200px;
  animation: box .6s ease-in;
}
#red {
  background: red;
}
#green {
  background: green;
}
#blue {
  background: blue;
}

@keyframes box {                                                            
  0% {opacity: 0;transform: translateY(-40px);}
  100%{opacity: 1;transform: translateY(0px);}
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
  <div id="red" class="box"></div>
  <div id="green" class="box"></div>
  <div id="blue" class="box"></div>
</div>

＆＃13;

(function loop() {
  var p = $.Deferred().resolve().promise();
  $('div.box').each(function(i, div) {
    p = p.then(function() {
      $(div).fadeIn().delay(5000).fadeOut().delay(1000);
      return $(div).promise();
    });
  });
  p.then(loop);
}());

＆＃13;

＆＃13;

＆＃13;

循环播放：

(function loop() {
  var p = $.Deferred().resolve().promise();
  $('div.box').each(function(i, div) {
    p = p.then(function() {
      $(div).fadeIn().delay(5000).fadeOut().delay(1000);
      return $(div).promise();
    });
  });
  p.then(loop);
}());

＆＃13;

＆＃13;

.box {
  display: none;
  width: 200px;
  height: 200px;
  animation: box .6s ease-in;
}
#red {
  background: red;
}
#green {
  background: green;
}
#blue {
  background: blue;
}

@keyframes box {                                                            
  0% {opacity: 0;transform: translateY(-40px);}
  100%{opacity: 1;transform: translateY(0px);}
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
  <div id="red" class="box"></div>
  <div id="green" class="box"></div>
  <div id="blue" class="box"></div>
</div>

＆＃13;

unmanaged

＆＃13;

＆＃13;

＆＃13;