Javascript 如何分别设置列表项内跨距的动画

我有一个列表项，它在容器中从左到右设置动画

列表中的每个项目都包含两个跨距，并且它们一起设置动画

我想不出一个合适的方法来将第二个跨距中的每一个都放在一个容器中并分别设置动画

这样我们就可以一个接一个地为第一个跨距和第二个跨距制作动画

简单地说，我们应该：

1） 首先，第一个跨距（

第一个跨距A:

和

第一个跨距B:

）从左到右设置动画

2） 在第一个跨距动画结束后，第二个跨距将从左向右设置动画（

second Span A

和

second Span B

）。（每个第二跨应具有其容器）

//添加动画
setTimeout（函数（）{
list.classList.add（“元素动画”）；
}，3700）

.containerList{
位置：绝对位置；
溢出：隐藏；
宽度：100vw；
高度：92vh；
顶部：3vh；
左：3vw；
背景：黑色；
不透明度：0.2；
轮廓：0.1vw橙色虚线；
}
保险单{
位置：绝对位置；
列表样式类型：无；
字体系列：“开放式Sans”，无衬线；
字体大小：400；
字体大小：8.7vh；
颜色：#b3a2c7；
左侧填充：10vh；
边际上限：6vh；
边缘底部：6vh；
顶部：15vh；
左：14vw；
不透明度：0；
}
第n个孩子（2）{
左：3vh；
字体系列：“开放式Sans”，无衬线；
字体大小：400；
颜色：#ccc1da；
}
ul li：不是（最后一个孩子）{
边缘底部：0.5vh；
}
.元素动画{
-webkit动画：动画帧放松5s；
-webkit动画迭代计数：1；
-webkit转换来源：50%50%；
-webkit动画填充模式：正向；
}
@-webkit关键帧动画帧{
0% {
不透明度：0；
-webkit转换：转换（-200px，0px）；
}
8% {
不透明度：1；
-webkit转换：翻译（0px，0px）；
}
100% {
不透明度：1；
-webkit转换：翻译（0px，0px）；
}
}

第一个跨度A：
第二跨A


第一个跨度B：
第二跨度B

我不会将动画应用于整个列表，而是应用于列表项本身。完成此操作后，可以使用

动画延迟

属性延迟动画

但是，由于您有

n

个要设置动画且不想写入

n

个延迟变量的跨度，因此另一种方法是添加以交错方式制作动画的类

这个例子把你的例子归结为最基本的。如果要更改

span

数组中

id

s的显示顺序，可以更改它们的顺序

//更改ID的顺序以影响外观顺序
常数跨度=[
“跨越第一”，
“第三次跨越”，
“跨秒”，
“第四跨”
].map（el=>document.getElementById（el））；
异步函数$timeout（持续时间=1000）{
返回新承诺（resolve=>setTimeout（resolve，duration））；
}
（异步函数（）{
forEach（el=>el.classList.add（“fade right--pre”）；
用于（连续跨度）{
添加（“向右淡入——中间”）；
等待$timeout（）；
add（“淡入右边--post”）；
}
}());
ul{
列表样式：无；
}
.右渐退-预{
不透明度：0；
转换：translateX（-200px）；
}
.右渐--在{
动画：fadeRightAnim 5s轻松播放；
}
.向右转{
不透明度：1；
变换：translateX（0）；
}
@关键帧fadeRightAnim{
0% {
不透明度：0；
-webkit转换：转换（-200px，0px）；
}
8% {
不透明度：1；
-webkit转换：翻译（0px，0px）；
}
100% {
不透明度：1；
-webkit转换：翻译（0px，0px）；
}
}


第一个跨度A：
第二跨A


第一个跨度B：
第二跨度B

谢谢你的回答……还有一点……我想这里发生了误会！请再看看这个问题…@SaraRee我不确定我是否看到了误解。根据我的阅读，您希望列表项以交错的方式设置动画。你能详细说明一下吗？我想先制作
第一个Span A
和
第一个Span B
动画…然后我想制作
第二个Span A
和
第二个Span B
动画…你可以为每个第二个Span创建单独的容器，但这可能不是正确的方法！