延迟使用setTimeout将类添加到元素？

Question

So I have a bunch of div elements that I want to add a class to, so it trigger a transition -- but I want the class to be added 1 at a time, not simultaneously so the animation appears 1 at a time.

This is how my javascript looks like.

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);

so basically I use querySelectorAll so it captures all the divs with that class, which shows up when I console.log() it.

But regardless the classes are not added with a delay.. I'm not sure how I can add an iteration to the milliseconds 2000 * i if i is only defined inside the loops. I tried creating a var counter; outside the setTimeout , and increment it inside the loop with counter++ , but the delay still won't work.

Also, I'm getting this error "Can't read property classList of undefined.

Thanks guys. Oh and please no jQuery :)

EDIT:

Thanks for the solution! :)

So does the setInterval work like a loop in your case?

Because I want this interval to occur whenever I click on a button, but removed when I exit out of the frame. So I added the below to remove the class from the elements. But I use a for loop instead..

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

and this works, but I'm just curious how come my first initial code (not this one above) doesn't work? how come using a counter works but not looping through it?

Answer 1

If I understand you correctly, you could use nested setTimeout calls, or use 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>