Javascript 在继续下一个动画之前，如何等待该动画完成？

我正在用HTML、CSS和JavaScript创建一个游戏。我有5个h2（s），我想等待动画完成，然后再转到代码的任何部分。动画按我希望的方式工作，但是JavaScript在第一个动画完成之前就开始了下一个动画！我试过使用

window.setTimeOut

但是没有运气。以下是带有所需代码的代码：

---

有人能帮我吗？

你可以听

animationend

事件，fe:

const animated = document.querySelector('.animated');

animated.addEventListener('animationend', () => {
  console.log('Animation ended');
});

阅读更多：

---

随机事件：

使用

setTimeout（nextI_ifelse（），5000）时您只需调用nextI_ifelse内联函数（并为此函数返回的值设置超时）。将其更改为
setTimeout（nextI_ifelse，5000）

任何你只想阅读的算法一般。你试图做的是有意义的，但你试图实现这一目标的方式却没有意义。代码笔中的for循环会立即运行，因此
iLevel
会直接设置为最后一个值。
为了详细说明entio的答案，当元素具有类“typing effect”时，就会出现动画。当动画结束时，浏览器会调用名为“animationend”的事件通过访问该事件，可以使用JavaScript在下一个元素上运行动画

请注意，在下面的HTML片段中，我将“display:hidden”移到了CSS类中，并删除了“typing effect”。在我的JavaScript函数中，我在第一个元素中启用该类，增加计数器，并告诉“animationend”使用“I”的新值再次调用该函数

编辑：我忘了提到，我修改了id值。我认为HTML5中的有效id值不能包含括号


console.log（“script.js已连接”）；
设iLevel=1；
设循环=0；
函数animateNext（i）{
let stop=document.queryselectoral（'.animated'）.length；
设animated=document.querySelector（`h2\${i}`）；
动画.classList.add（'typing-effect'）；
animated.addEventListener（'animationend'，（）=>{
如果（i==停止）{
iLevel=“iDone”；
}否则{
animateNext（i+1）；
}
});
}
函数startName（）{
animateNext（1）；
}
。动画{
显示：无；
}
.打字效果{
显示：块；
动画：打字效果5s步数（130，结束），0.75s步数结束无限；
空白：nowrap；
溢出：隐藏；
右边框：2倍纯黑；
}
.打字效果：后{
内容：“；
}
@关键帧键入效果{
0% {
宽度：0%；
}
100% {
宽度：100%；
}
}
@关键帧闪烁插入符号{
从…起
到{
边框颜色：透明；
}
50% {
边框颜色：黑色；
}
}
开始游戏
欢迎使用Wizrd号码
Adjfosdf
sosidjfs
difjspodf
斯基德吉福西德夫
Wow！这正是我要找的！我还没有完全听说过/使用过你使用的一些关键词，但我会探索一下。非常感谢。Document.querySelector在IMHO中更加直观，因为您可以形成类似于CSS选择器的选择器。Document.querySelectorAll返回结果的节点列表（类似于数组）。如果还有其他需要澄清的地方，请告诉我。另外，如果这足以满足您的需要，请接受我的回答。快乐编码！