バニラ・ジャバスクリプト - 異なるタイミングのアニメーション

Question

onscrollをバニラ・ジャバスクリプトで使用してアニメーションを作りたいと思います。私は2クラスを持っています。第1のものはであり、写真のボックスはアクティブであり、第2のものは.photography_box_activeであり、これはアクティブではない。私が1500pxの私の2番目のクラスにスクロールするとき.photography_box_activeがキックされ、私のアニメーションがうまくいきます。私の.photography_boxは12個のボックスで構成されています。アニメーションが起きると同時に、それらのすべてが私の望んでいないものと同時に入ります。私は彼らのそれぞれが次々に来ることを願っています。 jQueryでは$ .eachを使用することができましたが、Vanilla Javascriptを使用して同じ効果を得たいと思います。誰かが問題を解決するのを助けることができますか？

おかげで私のクラスのための

CSSコード：

.photography_box { 
    overflow: hidden; 
    position:relative; 
    cursor: pointer; 
    margin-bottom:20px; 
    opacity: 0; 
    cursor: pointer; 
    -webkit-transform:translateX(-50px); 
    transform:translateX(-50px); 
    -webkit-transition: all .3s ease-in-out; 
    transition: all .3s ease-in-out; 
} 

.photography_box_active { 
    opacity: 1; 
    -webkit-transform: translateX(0px); 
    transform: translateX(0px); 
} 

JSコードは次のとおりです。

あなたは、そのに基づいて、各項目ごとにアニメーションを遅らせるために、あなたのループ内で setTimeoutを使用することができます

var photoBox = document.getElementsByClassName("photography_box"); 

window.onscroll = function() { 
    loopBox() 
}; 

function loopBox(){ 
if (window.pageYOffset > 1500){ 
    for (f = 0; f <= photoBox.length -1; f++) { 
    photoBox[f].classList.add("photography_box_active"); 
     }; 
    }; 
}; 

Answer 1

インデックス。だから、あなたがしたい場合は150msの遅延：

for (f = 0; f < photoBox.length; f++) { 
    setTimeout(function(){ 
     photoBox[f].classList.add("photography_box_active"); 
    }, 150 * f); 
} 

なお、事前にアイテムの数を知っている、とあなたは、CSSトランジションを使用しているとして、これは既存のJSコードを保ち、CSSで純粋に行うことができるよう。あなたの.photography_box項目が.boxコンテナにされていると仮定すると

.box .photography_box:nth-child(1) { transition-delay: 0 } 
.box .photography_box:nth-child(2) { transition-delay: 0.05s } 
// and so on... 

あなたはSASS

Answer 2

例のようなCSSプリプロセッサを使用している場合は、書き込みするのは非常に面倒特にベンダープレフィックスと、何も迷惑：array.forEach（コールバックを[、thisArg]）は

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach