jquery - 如何让 CSS 动画 DIV 开始隐藏并逐一显示？

Question

目标是一旦用户滚动并且红框进入视野，就会触发 CSS 动画。它工作得很好，除了我期待所有的盒子开始完全隐藏，然后第一个盒子淡入，然后第二个盒子淡入，然后第三个，等等。但它们都开始可见，然后在褪色之前很快消失中。

我如何让所有 4 个框开始不可见，然后仅在它们各自的淡入淡出动画开始时出现？

;
(function($, win) {
  $.fn.inViewport = function(cb) {
    return this.each(function(i, el) {
      function visPx() {
        var H = $(this).height(),
          r = el.getBoundingClientRect(),
          t = r.top,
          b = r.bottom;
        return cb.call(el, Math.max(0, t > 0 ? H - t : (b < H ? b : H)));
      }
      visPx();
      $(win).on("resize scroll", visPx);
    });
  };
}(jQuery, window));


$(function() { // DOM is now ready
  $(".animateinview").inViewport(function(px) {
    if (px) $(this).addClass("triggeredCSS3");
  });
});

.space {
  height: 800px;
}

.column {
  height: 100px;
  width: 100px;
  background: red;
  margin-bottom: 5px;
}

.fadeinfast.triggeredCSS3 {
  -webkit-animation: fadein 1s;
  /* Safari, Chrome and Opera > 12.1 */
  -moz-animation: fadein 1s;
  /* Firefox < 16 */
  -ms-animation: fadein 1s;
  /* Internet Explorer */
  -o-animation: fadein 1s;
  /* Opera < 12.1 */
  animation: fadein 1s;
}

.fadeinfast.fadein1.triggeredCSS3 {
  animation-delay: 0s;
}

.fadeinfast.fadein2.triggeredCSS3 {
  animation-delay: 1s;
}

.fadeinfast.fadein3.triggeredCSS3 {
  animation-delay: 2s;
}

.fadeinfast.fadein4.triggeredCSS3 {
  animation-delay: 3s;
}

@keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}


/* Firefox < 16 */

@-moz-keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}


/* Safari, Chrome and Opera > 12.1 */

@-webkit-keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}


/* Internet Explorer */

@-ms-keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}


/* Opera < 12.1 */

@-o-keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="space">
</div>
<div class="column fadeinfast fadein1 animateinview">

</div>
<div class="column fadeinfast fadein2 animateinview">

</div>
<div class="column fadeinfast fadein3 animateinview">

</div>
<div class="column fadeinfast fadein4 animateinview">

</div>

Answer 1

您想添加 animation-fill-mode: forwards; 并将初始不透明度设置为 0。我更新了 Fiddle 以反射(reflect)更改:https://jsfiddle.net/d27fwe5c/6/

它的作用是在最后一帧停止动画。您可以在这里阅读更多相关信息:https://developer.mozilla.org/en-US/docs/Web/CSS/animation-fill-mode

;
(function($, win) {
  $.fn.inViewport = function(cb) {
    return this.each(function(i, el) {
      function visPx() {
        var H = $(this).height(),
          r = el.getBoundingClientRect(),
          t = r.top,
          b = r.bottom;
        return cb.call(el, Math.max(0, t > 0 ? H - t : (b < H ? b : H)));
      }
      visPx();
      $(win).on("resize scroll", visPx);
    });
  };
}(jQuery, window));


$(function() { // DOM is now ready
  $(".animateinview").inViewport(function(px) {
    if (px) $(this).addClass("triggeredCSS3");
  });
});

.space {
  height: 800px;
}

.column {
  height: 100px;
  width: 100px;
  background: red;
  margin-bottom: 5px;
  opacity: 0;
}

.fadeinfast.triggeredCSS3 {
  -webkit-animation: fadein 1s;
  /* Safari, Chrome and Opera > 12.1 */
  -moz-animation: fadein 1s;
  /* Firefox < 16 */
  -ms-animation: fadein 1s;
  /* Internet Explorer */
  -o-animation: fadein 1s;
  /* Opera < 12.1 */
  animation: fadein 1s;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  -ms-animation-fill-mode: forwards;
  -o-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

.fadeinfast.fadein1.triggeredCSS3 {
  animation-delay: 0s;
}

.fadeinfast.fadein2.triggeredCSS3 {
  animation-delay: 1s;
}

.fadeinfast.fadein3.triggeredCSS3 {
  animation-delay: 2s;
}

.fadeinfast.fadein4.triggeredCSS3 {
  animation-delay: 3s;
}

@keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}


/* Firefox < 16 */

@-moz-keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}


/* Safari, Chrome and Opera > 12.1 */

@-webkit-keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}


/* Internet Explorer */

@-ms-keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}


/* Opera < 12.1 */

@-o-keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="space">
</div>
<div class="column fadeinfast fadein1 animateinview">

</div>
<div class="column fadeinfast fadein2 animateinview">

</div>
<div class="column fadeinfast fadein3 animateinview">

</div>
<div class="column fadeinfast fadein4 animateinview">

</div>