Javascript 使用animate.css和jquery的顺序动画

我怎样才能使它们按顺序排列到fadeInUp

演示

HTML

---

你有两个选择

转换结束事件，可以使用JavaScript触发

过渡延迟

可以在任何具有转换的元素上侦听转换结束事件。当转换结束时，可以按如下方式启动函数：

element.addEventListener( "transitionend", function() {
    // run code here to add class on next element
});

您必须确保添加必要的前缀，但是jQuery可以提供帮助。这在

for

循环中很容易实现

没有额外JS或转换结束事件的另一种选择是将

.c.two

和

.c.twree

的转换延迟实际转换的长度（是

.c.twree

的两倍）。您可以使用相应元素上的

transition delay

属性直接将其添加到CSS中

---

我希望这会有所帮助。

您可以通过使用jquery的

fadeTo

来实现这一点，使用与您已有的逻辑完全相同的逻辑

$(function() {
  $('.c').each(function(i) {
  $(this).delay((i++) * 150).fadeTo(500,1); })
});

$（函数（）{
$（'.c'）。每个（函数（i）{
$（this）.delay（（i++）*150.fadeTo（500,1）；}）
});
.1、.2、.3{
高度：50px；
背景：#dddddd；
宽度：50px；
边界半径：50%；
显示：内联块；
保证金：自动10px；
不透明度：0；
}
我不知道你的意思，根据你的代码，你只是想把类“fadeInUp”添加到你的div中。但是试试这个也许会有帮助

function fade(e){
$(e+":not(:visible):first").fadeIn(function(){
    fade(e);
});
}

要使用该函数，只需将类“c”作为参数传递：
例如

这个问题是关于Animate.css库的，但答案对Animate.css没有帮助，我遇到了同样的问题，最终解决了。看下面的小提琴

代码：
Html示例

<div class="content">
  <div class="firstanimation">
    <h1 data-animation="fadeInUp" style='display: none'>
      This is Title
    </h1>
  </div>
  <div class="secondanimation">
    <p data-animation="wobble" style='display: none'>
      This is Description
    </p>
  </div>
  <div class="lastanimation">
    <p data-animation="bounce" style='display: none'><a href="#">Link</a></p>
  </div>
</div>

您可以在（'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend'，doSomething'）上使用
$（'.className'）
检测动画是否结束。@kuldip检测动画结束的内容？您可以检测第一个元素的动画结束，而不是为下一个元素添加动画…请检查此项。
function fade(e){
$(e+":not(:visible):first").fadeIn(function(){
    fade(e);
});
}

fade('.c');

<div class="content">
  <div class="firstanimation">
    <h1 data-animation="fadeInUp" style='display: none'>
      This is Title
    </h1>
  </div>
  <div class="secondanimation">
    <p data-animation="wobble" style='display: none'>
      This is Description
    </p>
  </div>
  <div class="lastanimation">
    <p data-animation="bounce" style='display: none'><a href="#">Link</a></p>
  </div>
</div>

// With Queue
function animate2(queue) {
  if (queue && queue.length > 0) {
    var elm = queue.shift();

    var animClass = "animated " + $(elm).data('animation');

    $(elm).show().addClass(animClass)
      .on('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function() {
        $(elm).removeClass();
        animate2(queue);
      });
  }
};



$(function() {
  var animationQueue = [
    $('.content').find('.firstanimation h1'),
    $('.content').find('.secondanimation p'),
    $('.content').find('.lastanimation p')
  ];

  animate2(animationQueue);
});