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 Transitions（及其等效的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毫秒。

在animate.css插件中给予延迟

1 个答案: