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

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>