Javascript 基于动画延迟设置超时功能

我需要将我的

.screens

设置为

display:none

，直到动画开始。每个都有一个单独的

动画延迟

，因此我希望实现的是一个函数将检查动画延迟的长度，然后确定

setTimeout

函数的长度

例如： 如果

.screens

的动画延迟为3秒，则在3秒后，我希望显示从

none

更改为

block

到目前为止，我编写的函数代码如下：

var screens = document.getElementsByClassName('screen');
for (var i=0;i<screens.length;i++){
    if (screens[i].style.animationDelay >=0){
        setTimeout(function(){
           this.style.display = "block"; 
        }, this.style.animationDelay);
    }
}

var screens=document.getElementsByClassName（'screen'）；
对于（变量i=0；i=0）{
setTimeout（函数（）{
this.style.display=“block”；
}，this.style.animationDelay）；
}
}

由于无法将

display

属性的状态/值从

无

设置为

块

，因此可以使用

可见性：隐藏

/

可见性：可见

对，当然也可以使用

不透明度：0

/

不透明度：1

:

屏幕{
可见性：隐藏；
动画：向前设置动画；
}
.screen:第一个子项{动画延迟：1s}
.screen:第n个子（2）{动画延迟：2s}
.screen:第n个子（3）{动画延迟：3s}
@关键帧设置动画{
到{可见性：可见}
}

1
2.
3

您可以试试这个。（您可以跳过第一部分，它只是用来生成带有随机

动画延迟的
屏幕
）


const generateScreens=（）=>{
for（设i=0；i<5；i++）{
设el=document.createElement（'div'）；
el.className='screen'；
el.style.animationDelay=Math.floor（Math.random（）*5）+s'；
文件.正文.附件（el）；
}
}
生成屏幕（）；
//您要求的代码从这里开始
const screens=document.getElementsByClassName（'screen'）；
[…屏幕].forEach（项目=>{
const delay=item.style.animationDelay.slice（0，item.style.animationDelay.length-1）；
设置超时（（）=>{
item.style.display='block'；
}，延迟*1000）；
});
div.screen{
宽度：40px；
高度：40px；
背景：红色；
边框：1px纯黑；
显示：无；
}