Vanilla Javascript - Animation mit unterschiedlichen Timing

Question

Ich möchte eine Animation mit onscroll in Vanilla Javascript machen. Ich habe 2 Klassen. Die erste ist .photography_box welche aktiv ist und die zweite ist .photography_box_active welche nicht aktiv ist. Wenn ich bis zu 1500px nach unten scrolle, erscheint meine zweite Klasse .photography_box_active tritt ein und meine Animation funktioniert großartig. Meine .photography_box besteht aus 12 Boxen. Wenn die Animation passiert, kommen alle zur selben Zeit herein, was ich nicht will. Ich möchte, dass jeder von ihnen nacheinander kommt. In jQuery könnte ich $ .Each verwenden, aber ich möchte den gleichen Effekt mit Vanilla Javascript haben. Kann mir jemand helfen, das Problem zu lösen?

Dank

CSS-Code für meine Klassen:

.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-Code ist:

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

Sie setTimeout in der Schleife verwenden können, seine die Animation für jedes Element zu verzögern, basierend auf Index. Wenn Sie also eine Verzögerung von 150ms wollen:

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

Beachten Sie, dass, wie Sie wissen, die Anzahl der Elemente im Voraus, und wie Sie CSS-Übergänge verwenden, diese rein in CSS getan werden könnte, Ihren bestehenden js Code zu halten. Angenommen, Ihre .photography_box Elemente in einem .box Behälter sind

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

recht umständlich zu schreiben, vor allem mit hersteller Präfixen, aber nichts ärgerlich, wenn man einen CSS-Präprozessor wie Sass verwendet

Answer 2

Beispiel: Array.ForEach (Rückruf [, thisArg])

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