Javascript 仅在元素进入视口(viewport)后的某个时间间隔内将一个类添加到该元素

Question

我有一系列图像，当它们进入视口(viewport)时，我想从 0 不透明度过渡到 1 不透明度。我完成了视口(viewport)检查部分并添加了类，但是我希望它们间隔一段时间，所以一旦前 3 个图像进入视口(viewport)，它们每 .5 秒左右出现 1、2、3 个。而不是同时所有 3 个。

这是一个关于它目前如何工作的 JS fiddle

reveal();

function reveal() {
  var reveal = document.querySelectorAll(".reveal");
  window.onscroll = function() {
    for(var i = 0; i < reveal.length; i++) {
      if(checkVisible(reveal[i]) === true) {
        reveal[i].classList.add("fade");
      }
    }
  }
};

function checkVisible(elm) {
  var rect = elm.getBoundingClientRect();
  var viewHeight = Math.max(document.documentElement.clientHeight, window.innerHeight);
  return !(rect.bottom < 0 || rect.top - viewHeight >= -200);
}

https://jsfiddle.net/u04sy7jb/

Answer 1

我修改了您的代码，在您滚动时显示的每个“组”中，为第一个元素之后的每个元素添加一个额外的 0.5 秒的 transition-delay。我在 JavaScript 中留下了注释，以便您了解更改。

如果您有任何问题，请告诉我!

现场演示:

reveal();

function reveal() {
  var reveal = document.querySelectorAll(".reveal");
  window.onscroll = function() {
    // start a new count each time user scrolls
    count = 0;
    for (var i = 0; i < reveal.length; i++) {
      // also check here if the element has already been faded in
      if (checkVisible(reveal[i]) && !reveal[i].classList.contains("fade")) {
        // add .5 seconds to the transition for each
        // additional element currently being revealed
        reveal[i].style.transitionDelay = count * 500 + "ms";
        reveal[i].classList.add("fade");
        // increment count
        count++;
      }
    }
  }
};

function checkVisible(elm) {
  var rect = elm.getBoundingClientRect();
  var viewHeight = Math.max(document.documentElement.clientHeight, window.innerHeight);
  return !(rect.bottom < 0 || rect.top - viewHeight >= -200);
}

.container {
  width: 100%;
  height: 1200px;
  background-color: orange;
}

.reveal {
  display: inline-block;
  width: 32%;
  margin: 0 auto;
  height: 400px;
  background-color: pink;
  border: 1px solid black;
  opacity: 0;
}

.fade {
  opacity: 1;
  transition: 1s;
}

<div class="container">
  <div class="reveal"></div>
  <div class="reveal"></div>
  <div class="reveal"></div>
  <div class="reveal"></div>
  <div class="reveal"></div>
  <div class="reveal"></div>
  <div class="reveal"></div>
  <div class="reveal"></div>
  <div class="reveal"></div>
</div>