滚动时延迟动画答案

【问题标题】：Delay Animations While Scrolling滚动时延迟动画
【发布时间】：2016-09-09 23:09:50
【问题描述】：

我正在尝试在用户滚动时创建动画，但我也想错开它们，因为它们不会同时发生，而是一个接一个地快速连续发生。

我正在使用以下内容向 div 添加一个触发 css 动画的类，然后我尝试使用 setTimeout 将下一个动画延迟一点。我想，因为它在 $.each() 循环中，所以每次超时都会遇到，但它们都会在当时淡入...
JSFiddle

编辑我认为我需要在 JS 中执行此操作，因为我的页面上有许多动画类型混合的动画，并且需要将类的添加延迟几毫秒。

/**
 * Check if Animation is currently in view
 */
function anim_in_view() {
  var window_height = $(window).height();
  var window_top_position = $(window).scrollTop();
  var window_bottom_position = (window_top_position + window_height);
  var $animations = $('body .animate');

  if ($animations.length) {
    $.each($animations, function() {
      var $elm = $(this);
      var element_height = $elm.outerHeight();
      var element_top_position = $elm.offset().top + 50;
      var element_bottom_position = (element_top_position + element_height);

      setTimeout(function() {
        if ((element_bottom_position >= window_top_position) &&
          (element_top_position <= window_bottom_position)) {
          // $elm.delay( 2000 ).addClass( 'visible' );
          $elm.addClass('visible');
        }
      }, 1000);
    });
  }
}
$(window).on('load scroll resize', anim_in_view);

.flex {
  margin-top: 1000px;
  margin-bottom: 500px;
  display: -webkit-flex;
  display: flex;
}
.flex > div {
  width: 33.33%;
  height: 200px;
}
.red {
  background: #f00;
}
.green {
  background: #0f0;
}
.blue {
  background: #00f;
}
.animate-opacity {
  opacity: 0;
  -webkit-transition: opacity 1s ease-in-out;
  transition: opacity 2s ease-in-out;
}
.animate-opacity.visible {
  opacity: 1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="fadeIns" class="flex">
  <div class="animate animate-opacity red"></div>
  <div class="animate animate-opacity green"></div>
  <div class="animate animate-opacity blue"></div>
</div>

【问题讨论】：

标签： jquery css animation css-transitions delay

【解决方案1】：

您可以使用transition-delay 来实现：

.animate-opacity:nth-child(2) {
  transition-delay: 1s;
}
.animate-opacity:nth-child(3) {
  transition-delay: 2s;
}

/**
 * Check if Animation is currently in view
 */
function anim_in_view() {
  var window_height = $(window).height();
  var window_top_position = $(window).scrollTop();
  var window_bottom_position = (window_top_position + window_height);
  var $animations = $('body .animate');

  if ($animations.length) {
    $.each($animations, function() {
      var $elm = $(this);
      var element_height = $elm.outerHeight();
      var element_top_position = $elm.offset().top + 50;
      var element_bottom_position = (element_top_position + element_height);

      if ((element_bottom_position >= window_top_position) &&
        (element_top_position <= window_bottom_position)) {
        // $elm.delay( 2000 ).addClass( 'visible' );
        $elm.addClass('visible');
      }
    });
  }
}
$(window).on('load scroll resize', anim_in_view);

.flex {
  margin-top: 1000px;
  margin-bottom: 500px;
  display: -webkit-flex;
  display: flex;
}
.flex > div {
  width: 33.33%;
  height: 200px;
}
.red {
  background: #f00;
}
.green {
  background: #0f0;
}
.blue {
  background: #00f;
}
.animate-opacity {
  opacity: 0;
  -webkit-transition: opacity 1s ease-in-out;
  transition: opacity 2s ease-in-out;
}
.animate-opacity:nth-child(2) {
  transition-delay: 1s;
}
.animate-opacity:nth-child(3) {
  transition-delay: 2s;
}
.animate-opacity.visible {
  opacity: 1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="fadeIns" class="flex">
  <div class="animate animate-opacity red"></div>
  <div class="animate animate-opacity green"></div>
  <div class="animate animate-opacity blue"></div>
</div>

【讨论】：

我没有意识到这甚至是一个 css 属性。我应该澄清一下 - 我在一个长页面中混合了一堆动画，需要将它们全部延迟一点，所以我不认为我可以在 CSS 中做到这一点。