Question

我对脚本有点麻烦。我有基本的想法，但不能将其翻译成代码。

这是它应该完成的事情：

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

for (int i=0 ; i<getChildCount() ; i++) {
            container.add(getChildAt(i));
        }

我想创建一个脚本：

从项目中删除.invisivel（display：none）类;
将.fadeInLeft类添加到其中;
保持可见约三秒钟;
将.fadeInLeft替换为.zoomOut;
再次隐藏元素;
重复列表中的下一个项目;

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

＆＃13;

<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>

＆＃13;

$(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')
      });
    });
  });
});

＆＃13;

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

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>

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

1 个答案: