javascript - 使用 setTimeout 延迟向元素添加类？

Question

所以我有一堆 div 元素，我想向其中添加一个类，因此它会触发一个转换 - 但我希望一次添加 1 个类，而不是同时添加一个，因此动画一次显示 1 个.

这就是我的 JavaScript 的样子。

var campaignInfo = document.querySelectorAll(".campaign-info-container");

setTimeout(function(){
    for(i=0; i<=campaignInfo.length;i++){
        campaignInfo[i].classList.add("campaign-container-slide");
        console.log(campaignInfo[i]);
    };  
}, 2000);

所以基本上我使用querySelectorAll，因此它捕获该类的所有div，当我console.log()它时，它会显示出来。

但无论如何，这些类都不会延迟添加。如果 i 仅存在，我不确定如何将迭代添加到毫秒 2000 * i定义在循环内部。我尝试在 setTimeout 之外创建一个 var counter;，并在循环内使用 counter++ 增加它，但延迟仍然不起作用。

另外，我收到此错误“无法读取未定义的属性类列表。

谢谢大家。哦，请不要使用 jQuery :)

编辑:

感谢您的解决方案! :)

那么在您的情况下，setInterval 是否像循环一样工作？

因为我希望每当单击按钮时都会发生此间隔，但在退出框架时会删除该间隔。所以我添加了以下内容以从元素中删除该类。但我使用 for 循环代替..

for(i=0; i<=campaignInfo.length; i++){ 
  campaignInfo[i].classList.remove("campaign-container-slide");
}

这是可行的，但我只是好奇为什么我的第一个初始代码(不是上面的这个)不起作用？为什么使用计数器可以工作但不能循环它？

Answer 1

如果我理解正确，您可以使用嵌套的 setTimeout 调用，或使用 setInterval :

var campaignInfo = document.querySelectorAll(".campaign-info-container");
var index = 0; // The index of the next `campaignInfo` div to update
var interval = setInterval(function() { // Create a new interval that fires every 500ms
  campaignInfo[index++].classList.add("campaign-container-slide");
  if (index === campaignInfo.length) { // The last div has been reached, so...
    clearInterval(interval); // Clear the interval using the reference
  }
}, 500);

body { font-size: 2em;}
.campaign-info-container { background: #555; }
.campaign-container-slide { background: #eee; }

<div class="campaign-info-container">One</div>
<div class="campaign-info-container">Two</div>
<div class="campaign-info-container">Three</div>
<div class="campaign-info-container">Four</div>