如何为同一类的每个元素一个接一个地执行相同的函数

Question

我有一个外框和一个内框，在第二个框中有一些具有相同类名的相同框。我希望所有这些框都能以这种淡入效果一个接一个地出现。到目前为止，我已经为外部和内部div完成了这项工作，并且我想对内部所有相同的框使用相同的函数。我试着对外部和内部div做同样的操作，因为它们也只需要完全相同的函数。但我没有成功。这是我的代码：

html:

<div class="div1">
<div class="div2">
<div class="div3"></div>
<div class="div3"></div>
<div class="div3"></div>
<div class="div3"></div>
<div class="div3"></div>
</div>
</div>

javascript:

let div1 = document.getElementsByClassName("div1")[0];
let div2 = document.getElementsByClassName("div2")[0];
let div3 = document.getElementsByClassName("div3");
div1.style.visibility = "hidden";
div2.style.visibility = "hidden";
function first() {
return new Promise(function (resolve, reject) {
setTimeout(function () {
div1.style.animation = "fadein 5s";
div1.style.visibility = "visible";
resolve("div1 worked!");
}, 1000);
});
}
function second() {
return new Promise(function (resolve, reject) {
setTimeout(function () {
div2.style.animation = "fadein 5s";
div2.style.visibility = "visible";
resolve("div2 worked!");
}, 1000);
});
}
function abc(element) {
return new Promise(function (resolve, reject) {
setTimeout(function () {
element.style.animation = "fadein 5s";
element.style.visibility = "visible";
resolve("third");
}, 1000);
});
}
first()
.then(second)
.then((div3) => {
div3.forEach((element) => {
abc(element);
});
});

css

.div1 {
width: 400px;
height: 500px;
background-color: yellow;
}
.div2 {
width: 350px;
height: 400px;
background-color: green;
}
.div3 {
width: 300px;
height: 50px;
background-color: grey;
margin: 10px;
}
@keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}

前两个有效，我不知道如何为剩下的div3类div重用该函数。我也尝试在前两个函数中重用该函数，但它没有起作用，最终一次又一次地编写相同的函数。我想为div3中的每个元素调用函数abc，只在第一个元素完成后执行下一个元素——就像它如何执行第一个和第二个元素，但使用相同的函数一样。不知道怎么做，我被卡住了。这是一个代码笔链接。到目前为止，所有div3div都与第二个div一起出现。

Answer 1

您可以根据需要使用loops和animation-delay来应用动画。以下代码将适用于这种情况。代码中充满了注释，用来解释每一点上发生的事情。我还稍微修改了css，这样我们在执行代码时就不会得到任何奇怪的闪烁效果。

//Declare all the classes - 
let divs = ["div1", "div2", "div3"];
//Initiate a delay for each iteration
let delay = 0;
//Run a loop for each class
for(let i = 0; i<divs.length; i++){

//Get the element
let div = document.getElementsByClassName(divs[i]);

//Run a loop for element with the class
//(We only have one div with the classes div1 and div2. So it will run one time for them.
//We have 5 divs with div3 class. It will run 5 times in that case 
for(let j = 0; j<div.length; j++){

//Get the individual element and add animation with delay
//The delay will also ensure that the animation starts only when the previous element has finished the animation
div[j].style.animation = `fadein 5s ${delay}s forwards` ;
div[j].classList.add("show");

//Increase delay with every iteration
delay+=5;
}
}

div {
visibility: hidden;
}
.div1 {
width: 400px;
height: 500px;
background-color: yellow;
}
.div2 {
width: 350px;
height: 400px;
background-color: green;
}
.div3 {
width: 300px;
height: 50px;
background-color: grey;
margin: 10px;
}
.show {
opacity: 0;
visibility: visible;
}
@keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}

<div class="div1">
<div class="div2">
<div class="div3">1</div>
<div class="div3">2</div>
<div class="div3">3</div>
<div class="div3">4</div>
<div class="div3">5</div>
</div>
</div>

剧本可能看起来很长，但只有10行长，没有评论。如果您增加或减少divs的数量，这也会起作用

Answer 2

这是使用setInterval每x秒执行一段代码来解决问题的一种方法。

函数fadeIn采用将通过添加类"来淡入的元素数组；显示"；(请参阅下面CSS代码中"show"的详细信息(。这将为给定的元素设置动画。

函数start在第一个元素集合中收集将被淡入淡出的元素，然后在数组中的其余元素中计数淡入淡出；元素"；每3秒。

function fadeIn(el) {
// For every element in the collection
for (var i = 0; i < el.length; i++) {
// Add the class "show"
el[i].classList.add('show');
}
}
function start() {
/*
Collects all the elements that we want to fadeIn in order. First collection of elements will be animated firstly, second collection of elements will be animated secondly, etc.
*/
var elements = [];
elements.push(document.getElementsByClassName("div1"));
elements.push(document.getElementsByClassName("div2"));
elements.push(document.getElementsByClassName("div3"));

// Show the first collection of elements
fadeIn(elements[0]);

// Show the rest of the element collections in array "elements"
var i = 1;
fadeInInterval = setInterval(function() {
fadeIn(elements[i]);
// If there is no more collections to fade in, end the setInterval
if (i == elements.length-1) {
clearInterval(fadeInInterval)
}
i++
}, 3000) // Every 3 seconds
}
start();

div {
visibility: hidden;
}
.div1 {
width: 400px;
height: 500px;
background-color: yellow;
}
.div2 {
width: 350px;
height: 400px;
background-color: green;
}
.div3 {
width: 300px;
height: 50px;
background-color: grey;
margin: 10px;
}
.show {
animation: fadein 5s;
visibility: visible;
}
@keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}

<div class="div1">
<div class="div2">
<div class="div3"></div>
<div class="div3"></div>
<div class="div3"></div>
<div class="div3"></div>
<div class="div3"></div>
</div>
</div>