Создание цикла для упрощения этого кода HTML и CSS

Question

У меня есть следующий код, который создает эффект выпадающего списка при нажатии кнопки. Каждый из семи divs падает с возрастающими приращениями 50px. Я ищу, чтобы увидеть, если есть более рациональный способ достижения того же эффекта, возможно зацикливание функцию уронить каждый susbsequent DIV в 50px шагом вместо того, чтобы назвать так много функций:

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} 

и 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

Рассмотрим написание функции:

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" 
} 

Затем вы можете сделать функцию, чтобы бросить все:

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

Answer 2

Вы назначаете много внутреннего стиля для ваших элементов во время анимации.

Не проще писать CSS так:

#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; 
} 

и JavaScript, как andlrc показал вам

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

dropAll() { ... } 

Answer 3

МНОГО способов сделать это. Я хотел бы использовать CSS больше и использовать цикл, чтобы пройти через элементы

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; 
}