使用 jQuery 启动异步 CSS 动画答案

【问题标题】：Using jQuery to start asynchronous CSS animations使用 jQuery 启动异步 CSS 动画
【发布时间】：2018-05-06 13:01:27
【问题描述】：

我正在尝试实现滚动到视图中的动画。我制作了这个版本，但它有很长和重复的代码。我尝试计算 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>

【问题讨论】：

我向下滚动，4 个框淡入。你能澄清问题是什么
问题是我用来实现这一点的 jQuery 代码非常长且重复，我想知道是否有更简单/更短的解决方案。就像循环遍历 div 或类似的东西。

标签： jquery css animation scroll

【解决方案1】：

您可以在 jquery 中使用 each 循环遍历 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>

【讨论】：