Javascript只在元素之后的某个时间间隔向元素添加一个类'；s进入视口

我有一系列图像，当它们进入视图端口时，我想从0不透明度转换为1不透明度。我已经完成了视口检查部分和添加类，但是我希望它们保持一定的间隔，因此，一旦前3个图像进入视图端口，它们将每隔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);
}

reveal（）；
函数揭示（）{
var-reveal=document.queryselectoral（“.reveal”）；
window.onscroll=函数（）{
对于（变量i=0；i=-200）；
}

---

您可以粘贴

显示[i].classList.add（“淡入”）在setTimeout中，它作为
i
th元素的函数执行，因此它们显示了您是如何描述的。下面是一个添加short函数来添加类的示例，并在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)
}

函数揭示（）{
var-reveal=document.queryselectoral（“.reveal”）；
window.onscroll=函数（）{
对于（变量i=0；i
我修改了您的代码，在滚动显示的每个“组”中，在第一个元素之后的每个元素中添加一个额外的.5秒的过渡延迟。我在JavaScript中留下了注释，以便您能够理解这些更改

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

现场演示：


reveal（）；
函数揭示（）{
var-reveal=document.queryselectoral（“.reveal”）；
window.onscroll=函数（）{
//每次用户滚动时开始新计数
计数=0；
对于（变量i=0；i=-200）；
}
.container{
宽度：100%；
高度：1200px；
背景颜色：橙色；
}
.揭露{
显示：内联块；
宽度：32%；
保证金：0自动；
高度：400px；
背景颜色：粉红色；
边框：1px纯黑；
不透明度：0；
}
.褪色{
不透明度：1；
过渡：1s；
}
您也可以使用
：n子项
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;
}

jsIDLE:
当计算超时时，您正在传递
显示
的索引，但这将导致该数组的每个元素显示自己。比之前的元素晚5秒-即使该元素是第一个刚进入视口的元素。非常感谢，我使用的是setInterval，它导致了很多关于变量未定义的错误，尽管它是上面定义的。不知道那里发生了什么。但再次感谢，这是完美的@切凯很乐意帮忙！是的，当使用setTimeout时，作用域变量可能会变得棘手，但也有解决方案。但是，通常避免JS定时器的解决方案更干净。