更改列表和循环中的元素类别

Question

我的脚本有点问题。我有基本的想法，但无法将其转化为代码。

这是它应该完成的任务：

我正在使用 Animate.CSS，我有以下列表：

<ul class="display" id="imagens-home">
  <li class="invisivel"><img src="img/teste/lanche-1.jpg/></li>
  <li class="invisivel"><img src="img/teste/lanche-2.jpg/></li>
  <li class="invisivel"><img src="img/teste/lanche-3.jpg/></li>
  <li class="invisivel"><img src="img/teste/lanche-4.jpg/></li>    
</ul>

我想制作一个脚本：

1. 从项目中删除 .invisivel (display:none) 类；
2. 向其中添加 .fadeInLeft 类；
3. 保持可见约三秒钟；
4. 将 .fadeInLeft 替换为 .zoomOut；
5. 再次隐藏元素；
6. 重复列表中的下一项；

我设法找到一种方法来启用 FadeIn 动画，然后在它结束后，启用 FadeOut 并使 div 再次不可见，使用以下代码：

$(document).ready(function() {
  var animationIn = 'animated fadeInLeft';
  var animationOut = 'animated zoomOut';
  var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';

  $('#imagens-home>li').each(function(){
    $(this).removeClass('invisivel').addClass(animationIn).on(animationEnd, function(){
      $(this).removeClass(animationIn).addClass(animationOut).on(animationEnd, function(){
        $(this).removeClass(animationOut).addClass('invisivel')
      });
    });
  });
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="display" id="imagens-home">
  <li class="invisivel">0</li>
    <li class="invisivel">1</li>
  <li class="invisivel">2</li>
    <li class="invisivel">3</li>    
</ul>

但我找不到让它循环遍历列表项的方法。任何帮助将不胜感激

Answer 1

如果我理解正确，您希望每个元素在下一个元素开始动画之前完成动画。

您可以使用递归函数通过在前一个动画完成后动画下一个动画来遍历元素，而不是使用循环，这将基本上并行启动所有动画。

var animationIn = 'animated fadeInLeft';
var animationOut = 'animated zoomOut';
var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';

function animate($items, idx) {
  if (idx >= $items.length) return; // no more items, stop animating 

  var $current = $items.eq(idx);
  $current.removeClass('invisivel').addClass(animationIn).on(animationEnd, function() {
    $current.removeClass(animationIn).addClass(animationOut).on(animationEnd, function() {
      $current.removeClass(animationOut).addClass('invisivel');
      animate($items, idx + 1); // try animating the next item
    });
  });
}

$(document).ready(function() {
  animate($('#imagens-home>li'), 0);
});

.invisivel {
  display: none;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="display" id="imagens-home">
  <li class="invisivel">0</li>
  <li class="invisivel">1</li>
  <li class="invisivel">2</li>
  <li class="invisivel">3</li>
</ul>