遅延をsetTimeoutで要素に追加しますか？

Question

クラスを追加したいdiv要素がたくさんあるので、トランジションがトリガされますが、クラスを1つずつ追加して同時に追加するのではなく、アニメーションが1つずつ表示されるようにします。

これは私のjavascriptのようです。それは私がそれをconsole.log()時に現れ、そのクラスを持つすべてのdivをキャプチャするよう

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を使用しています。

しかし、クラスには遅延が加えられていません。iがループ内でのみ定義されている場合は、どのように繰り返しをミリ秒単位で追加できますか2000 * i私はsetTimeoutの外にvar counter;を作成してみましたが、ループ内でcounter++という文字列でインクリメントしましたが、遅延は依然として機能しません。解決のための

ありがとう：。。

また、私はノーjQueryの:)

EDITをああ、このエラーは「未定義のプロパティCLASSLISTを読み取ることができません

みんなありがとうを取得してくださいよ！:)

をだからあなたの場合にはループのようなsetInterval動作しますか？

私がしたいので、この間隔が発生したときにIボタンをクリックしますが、フレームを終了すると削除されます。そこで、要素からクラスを削除するために、以下を追加しました。しかし、私は

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

..代わりにforループを使用し、これは動作しますが、私は私の最初の初期のコード（上記ではないこの1つは）動作しませんどのように来るだけで興味が？どのようにカウンタを使用して来るが、それをループしない？

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>