バニラJSのSetTimeout forEach.callがシーケンス内で動作しない

Question

シーケンス内のすべてのLIをアニメーション化しようとしていますが、コードはすべてのLIを一度にアニメーション化しています。

どこでも役に立つリプライが見つかりませんでした.Jqueryでこれを行う方法はわかりましたが、ここでは何も追加されません。

イベントハンドラと呼び出された関数にタイムアウトを追加しようとしましたが、どちらの方法も機能しません。

codepenにこの機能です

function changeLi() { 
    setTimeout(function() { 
    [].forEach.call(li, function(li) { 
     li.style.transform = "translateX(200px)"; 
    }, 900); 
    }); 
} 

リンク：

http://codepen.io/damianocel/pen/PzYXmv

私はコールにのstopPropagation /でpreventDefaultを追加しようとしましたが、それはどちらかの助けにはなりませんでした。

Answer 1

コードにはいくつかの問題があります。まず、900はsetTimeoutのパラメータではなく、forEach.callのパラメータです。それはちょうどエラーのようです。

第二に、上記固定されている場合でも、あなたのコードは、簡単なセット、その後に、将来的に900msのための単一のタイムアウトは、リストにあなたのli年代のすべてを反復なり、一度それらを変換します。あなたが本当にしたいと思うのは、すべてのアイテムをループし、それぞれが以前のものから一定の時間が経過している将来実行されるタイムアウトを定義することです。 forEachはインデックスを提供するので、静的なmsカウントを使用して、現在のインデックスで複数のインデックスを使用して、のからさらにアニメーション化することができます。

私はあなたが実際にあなたのliリストをループこのような何か、を探していると信じて、そして以前から各アイテムの100ミリ秒で発生するトランスフォームセット：

function changeLi() { 
    [].forEach.call(li, function(li, i) { 
    setTimeout(function() { 
     li.style.transform = "translateX(200px)"; 
    }, 100 * i); 
    }); 
}