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

Question

我有一系列图像，当它们进入视口时，我希望从0不透明度过渡到1不透明度。 我已经完成了视口检查部分并添加了类，但是我希望它们间隔一定的时间，因此一旦前三个图像进入视口，它们每0.5秒左右就会出现1、2、3。 而不是同时全部3个。

这是当前工作方式的JS小提琴

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> 

Answer 2

您可以粘贴您的reveal[i].classList.add("fade"); 在setTimeout的内部，该setTimeout作为第i个元素的函数执行，因此它们显示了您的描述方式。 这是一个添加短函数以添加类并在setTimeout中使用它来实现此目的的示例，尽管您可以更改它以满足任何其他需求。

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

function addMyFadeClass(element, i) {
  setTimeout(function() {
    element.classList.add("fade");
  }, i * 500)
}

Answer 3

您也可以使用:nth-child CSS选择器，而无需更改JS：

.reveal:nth-child(3n+1).fade {
  opacity: 1;
  transition: 1s;
}

.reveal:nth-child(3n+2).fade {
  opacity: 1;
  transition: 1.5s;
}

.reveal:nth-child(3n).fade {
  opacity: 1;
  transition: 2s;
}

JSFiddle： https ：//jsfiddle.net/u04sy7jb/8/