延迟 animate.css 插件

Question

您好，我正在使用这个名为 animate.css 的插件。

http://daneden.github.io/animate.css/

我已经成功实现了动画.. 我有 6 个图标。我希望他们以延迟 1 秒的顺序依次制作动画。我无法实现动画延迟。这一切都是一次动画。请帮忙。

这是 Html 代码。

<ul class="top_feat">
<li><img src="images/cc.png" class="revealOnScroll "  data-animation="zoomIn"   ></li>
<li>Covered Car Park</li>
</ul>
<ul class="top_feat">
<li><img src="images/club_house.png" class="revealOnScroll"  data-animation="zoomIn" ></li>
<li>Club House</li>
</ul>
<ul class="top_feat">
<li><img src="images/gym.png"  class="revealOnScroll "  data-animation="zoomIn" ></li>
<li>Gymnasium</li>
</ul>
<ul class="top_feat">
<li><img src="images/rec_hall.png"  class="revealOnScroll "  data-animation="zoomIn" ></li>
<li>Recreation Hall</li>
</ul> 

这是它的 jquery。

<script>
$(function() {

  var $window           = $(window),
      win_height_padded = $window.height() * 1.1,
      isTouch           = Modernizr.touch;

  if (isTouch) { $('.revealOnScroll').addClass('animated'); }

  $window.on('scroll', revealOnScroll);

  function revealOnScroll() {
    var scrolled = $window.scrollTop(),
        win_height_padded = $window.height() * 1.1;

    // Showed...
    $(".revealOnScroll:not(.animated)").each(function () {
      var $this     = $(this),
          offsetTop = $this.offset().top;

      if (scrolled + win_height_padded > offsetTop) {
        if ($this.data('timeout')) {
          window.setTimeout(function(){
            $this.addClass('timeout');
          }, parseInt($this.data('timeout'),10));
        } else {
          $this.addClass('animated ' + $this.data('animation'));
        }
      }
    });
    // Hidden...
   $(".revealOnScroll.animated").each(function (index) {
      var $this     = $(this),
          offsetTop = $this.offset().top;
      if (scrolled + win_height_padded < offsetTop) {
        $(this).removeClass('animated fadeInUp flipInX lightSpeedIn')
      }
    });
  }

  revealOnScroll();
});


</script>

谢谢。

Answer 1

除了切换类以显示元素之外，您完全可以在没有任何 JS 的情况下执行此操作。只需设置您的 CSS 动画并将其应用于所有元素，然后在每个单独的图标上设置不同的 animation-delay 值。

这里有一个 CodePen 来演示： http://codepen.io/rupl/pen/fCtbx

• 阅读 MDN 上的 CSS Animations
• 在 MDN 上了解 CSS animation-delay

如果您希望这种情况发生以响应用户交互，请考虑改用 CSS 过渡（及其等效的 transition-delay）：

• 在 MDN 上了解 CSS Transitions
• 在 MDN 上了解 CSS transition-delay

---

编辑：即使我会更改您的标记，如果我自己创作它因此它使用一个 <ul>，我想使用您的确切示例我会应用这样的东西（您需要为每个元素编写一次此代码）：

.top_feat:nth-of-type(XXX) {animation-delay: YYYs; }

• XXX 将是 1、2、3 等。1 是第一个图标，2 是第二个。
• YYY 将以秒为单位的延迟。您还可以指定ms 为毫秒。