时间戳

首页 > 解决方案 > 在继续下一个之前，我如何等待这个动画完成？

javascript - 在继续下一个之前，我如何等待这个动画完成？

问题描述

我正在使用 HTML、CSS 和 JavaScript 创建游戏。我有 5 个 h2(s)，我想等待动画完成，然后再继续执行代码的任何部分。动画按我想要的方式工作，但 JavaScript 甚至在第一个动画完成之前就开始了下一个动画！我试过使用

window.setTimeOut

但没有运气。这是带有所需代码的代码：https ://codepen.io/HumanFriend/pen/mdOBvoL 有人可以帮我吗？

标签： javascripthtmlcssanimation

解决方案

您可以收听animationend事件，fe：

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

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

阅读更多：https ://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/animationend_event

随机的东西：

当您使用时，setTimeout(nextI_ifelse(), 5000);您只需调用 nextI_ifelse 内联（并且您正在为此函数返回的值设置超时）。将其更改为setTimeout(nextI_ifelse, 5000);

任何您只想阅读一般算法的内容。您尝试做的事情是有意义的，但您尝试实现的方式却没有。codepen 中的 for 循环会立即运行，因此iLevel直接设置为最后一个值。

推荐阅读