使用jQuery启动异步CSS动画

Question

我正在尝试滚动到视图中的动画。我已经使这个版本有效，但它有很长和重复的代码。我尝试计算div并循环遍历它们，逐个动画它们，但它似乎并没有很好地工作。有什么建议？我无法在其他任何地方找到任何类似的问题。

提前致谢。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;