Erstellen einer Schleife, um diesen HTML- und CSS-Code zu optimieren

Question

Ich habe den folgenden Code, der einen Dropdown-Effekt beim Klicken auf eine Schaltfläche erzeugt. Jedes der sieben Divs fällt in steigenden Schritten von 50px ab. Ich bin auf der Suche, um zu sehen, ob es eine schlankere Art und Weise ist möglicherweise die gleiche Wirkung zu erzielen, indem eine Funktion Looping jeden susbsequent div in 50px Schritte fallen zu lassen, anstatt so viele Funktionen, die rufen:

HTML

<button id="click_btn_one" onclick="dropSeven('divSeven'), dropSix('divSix'), dropFive('divFive'), dropFour('divFour'), dropThree('divThree'), dropTwo('divTwo'), dropOne('divOne')">Click here</button> 

<div id="divSeven">This is div seven</div> 
<div id="divSix">This is div six</div> 
<div id="divFive">This is div five</div> 
<div id="divFour">This is div four</div> 
<div id="divThree">This is div three</div> 
<div id="divTwo">This is div two</div> 
<div id="divOne">This is div one</div> 

CSS

#divSeven {position:absolute; top:-100px; left:0px; opacity:0; height:50px; width:200px; background:#000; color:#fff}  
#divSix {position:absolute; top:-100px; left:0px; opacity:0; height:50px; width:200px; background:#111; color:#fff} 
#divFive {position:absolute; top:-100px; left:0px; opacity:0; height:50px; width:200px; background:#222; color:#fff} 
#divFour {position:absolute; top:-100px; left:0px; opacity:0; height:50px; width:200px; background:#333; color:#fff} 
#divThree {position:absolute; top:-100px; left:0px; opacity:0; height:50px; width:200px; background:#444; color:#fff} 
#divTwo {position:absolute; top:-100px; left:0px; opacity:0; height:50px; width:200px; background:#555; color:#fff} 
#divOne {position:absolute; top:-100px; left:0px; opacity:0; height:50px; width:200px; background:#666; color:#fff} 

und JAVASCRIPT

function dropSeven(el) { 
var seven = document.getElementById(el); 
seven.style.transition = "top 0.8s ease-in 0s, opacity 1s ease-in 0s"; 
seven.style.opacity = "1"; 
seven.style.top = "350px" 
} 

function dropSix(el) { 
var six = document.getElementById(el); 
six.style.transition = "top 0.8s ease-in 0s, opacity 1s ease-in 0s"; 
six.style.opacity = "1"; 
six.style.top = "300px" 
} 

function dropFive(el) { 
var five = document.getElementById(el); 
five.style.transition = "top 0.8s ease-in 0s, opacity 1s ease-in 0s"; 
five.style.opacity = "1"; 
five.style.top = "250px" 
} 

function dropFour(el) { 
var four = document.getElementById(el); 
four.style.transition = "top 0.8s ease-in 0s, opacity 1s ease-in 0s"; 
four.style.opacity = "1"; 
four.style.top = "200px" 
} 

function dropThree(el) { 
var three = document.getElementById(el); 
three.style.transition = "top 0.8s ease-in 0s, opacity 1s ease-in 0s"; 
three.style.opacity = "1"; 
three.style.top = "150px" 
} 

function dropTwo(el) { 
var two = document.getElementById(el); 
two.style.transition = "top 0.8s ease-in 0s, opacity 1s ease-in 0s"; 
two.style.opacity = "1"; 
two.style.top = "100px"; 
} 

function dropOne(el) { 
var one = document.getElementById(el); 
one.style.transition = "top 0.8s ease-in 0s, opacity 1s ease-in 0s"; 
one.style.opacity = "1"; 
one.style.top = "50px" 
} 

Answer 1

Betrachten Sie Ihre Funktionen wie das Schreiben:

function drop(offset, id) { 
    var four = document.getElementById(id); 
    four.style.transition = "top 0.8s ease-in 0s, opacity 1s ease-in 0s"; 
    four.style.opacity = "1"; 
    four.style.top = offset + "px" 
} 

Dann Sie eine Funktion alle fallen machen:

function dropAll() { 
    ['divOne', 'divTwo', ..., 'divSeven'].forEach(function(id, index) { 
    var offset = index * 50 + 50; 
    drop(offset, id); 
    }); 
} 

Answer 2

Du viele Inline-Stil, um Ihre Elemente während der Animation zuweisen.

Ist es nicht einfacher, CSS, so zu schreiben:

#divSeven { 
    position:absolute; top:-100px; left:0px; opacity:0; height:50px; width:200px; background:#000; color:#fff; 
}  

#divSeven[dropped=true] { 
    transition: top 0.8s ease-in 0s, opacity 1s ease-in 0s; opacity:1; 
} 

und Javascript als andlrc Sie

zeigte

function drop(offset, id) { 
    var four = document.getElementById(id); 
    four.setAttribute('dropped','true'); 
    four.style.top = offset + "px" 
} 

dropAll() { ... } 

Answer 3

Eine Menge von Möglichkeiten, es zu tun. Ich würde css mehr verwenden und eine Schleife verwenden, um durch die Elemente gehen

https://jsfiddle.net/stevenkaspar/6agzadto/

<button id="click_btn_one" onclick="drop()">Click here</button> 

<div id="divSeven" data-dropdown class='fade'>This is div seven</div> 
<div id="divSix" data-dropdown class='fade'>This is div six</div> 
<div id="divFive" data-dropdown class='fade'>This is div five</div> 
<div id="divFour" data-dropdown class='fade'>This is div four</div> 
<div id="divThree" data-dropdown class='fade'>This is div three</div> 
<div id="divTwo" data-dropdown class='fade'>This is div two</div> 
<div id="divOne" data-dropdown class='fade'>This is div one</div> 

function drop(){ 
    var elems = document.querySelectorAll('[data-dropdown]'); 
    var offset = 50; 
    for(var i = 0; i < elems.length; i++){ 
    elems[i].className = 'fade in'; 
    elems[i].style.top = (offset * i) + 'px'; 
    } 
} 

#divSeven {position:absolute; top:-100px; left:0px; height:50px; width:200px; background:#000; color:#fff}  
#divSix {position:absolute; top:-100px; left:0px; height:50px; width:200px; background:#111; color:#fff} 
#divFive {position:absolute; top:-100px; left:0px; height:50px; width:200px; background:#222; color:#fff} 
#divFour {position:absolute; top:-100px; left:0px; height:50px; width:200px; background:#333; color:#fff} 
#divThree {position:absolute; top:-100px; left:0px; height:50px; width:200px; background:#444; color:#fff} 
#divTwo {position:absolute; top:-100px; left:0px; height:50px; width:200px; background:#555; color:#fff} 
#divOne {position:absolute; top:-100px; left:0px; height:50px; width:200px; background:#666; color:#fff} 

.fade { 
    opacity: 0; 
    transition: top 0.8s ease-in 0s, opacity 1s ease-in 0s; 
} 
.fade.in { 
    opacity: 1; 
}