jquery - 使用jQuery启动异步CSS动画

我正在尝试实现滚动到视图中的动画。我已经制作了这个版本，但是它具有非常长且重复的代码。我尝试对div进行计数并循环遍历，将它们一一设置为动画，但效果似乎不太理想。有什么建议么？我在其他任何地方都找不到任何类似的问题。

提前致谢。

$(document).ready(function () {
  var scrollTop,
      windowHeight = ($(window).height()) / 2,
      divScrollTop = $("section").offset().top;

  $(window).on('scroll', function () {
    scrollTop = $(window).scrollTop();
      if (windowHeight + scrollTop >= divScrollTop) {
          setTimeout(function() {
                $(".card:nth-of-type(1)").addClass('animate');
            }, 0);
            setTimeout(function() {
                $(".card:nth-of-type(2)").addClass('animate');
            }, 300);
            setTimeout(function() {
                $(".card:nth-of-type(3)").addClass('animate');
            }, 600);
            setTimeout(function() {
                $(".card:nth-of-type(4)").addClass('animate');
            }, 900);
        }
  });

})

section {
    margin-top: 100%;

  height: 800px;
}
.card {
  height: 50px;
  width: 50px;
  background-color: #000;
  margin-right: 10px;
  transition: all 1s;
  display: inline-block;
    opacity: 0;
}

@keyframes slideUpFadeIn {
  from {
    transform: translateY(50px);
    opacity: 0
  }
  to {
    transform: translateY(0);
    opacity: 1
  }
}

.animate {
  animation: slideUpFadeIn 1s forwards;
}

<section>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
</section>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

最佳答案

您可以在jquery中使用每个循环遍历div。然后延迟循环内的每个动画。

$(document).ready(function () {
  var scrollTop,
      windowHeight = ($(window).height()) / 2,
      divScrollTop = $("section").offset().top;

  $(window).on('scroll', function () {
    scrollTop = $(window).scrollTop();
      if (windowHeight + scrollTop >= divScrollTop) {
            $(".card").each(function(i) {
                $(this).delay(i*300).queue(function() {
                    $(this).addClass('animate').dequeue();
                });
            })
        }
  });
});

section {
    margin-top: 100%;

  height: 800px;
}
.card {
  height: 50px;
  width: 50px;
  background-color: #000;
  margin-right: 10px;
  transition: all 1s;
  display: inline-block;
    opacity: 0;
}

@keyframes slideUpFadeIn {
  from {
    transform: translateY(50px);
    opacity: 0
  }
  to {
    transform: translateY(0);
    opacity: 1
  }
}

.animate {
  animation: slideUpFadeIn 1s forwards;
}

<section>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
</section>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>