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

【问题标题】：How do I wait for this animation to finish before moving on to the next one?在继续下一个之前，我如何等待这个动画完成？
【发布时间】：2021-05-25 05:10:39
【问题描述】：

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

window.setTimeOut

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

【问题讨论】：

标签： javascript html css animation

【解决方案1】：

为了详细说明entio 的答案，当元素具有“打字效果”类时，您的动画就会出现。当动画结束时，浏览器会调用一个名为“animationend”的事件。您可以使用 JavaScript 通过访问该事件在下一个元素上运行动画。

请注意下面的 HTML 代码段，我已将“显示：隐藏”移至 CSS 类并删除了“打字效果”。在我的 JavaScript 函数中，我在第一个元素中启用了类，递增计数器，并告诉“animationend”使用“i”的新值再次调用该函数。

编辑：我忘了提，我修改了 id 值。我不相信 HTML5 中的有效 id 值可以包含括号。

console.log("script.js connected");

let iLevel = 1;
let loop = 0;

function animateNext(i){
  let stop = document.querySelectorAll('.animated').length;
  let animated = document.querySelector(`#h2_${i}`);
  animated.classList.add('typing-effect');

  animated.addEventListener('animationend', () => {
    if(i===stop){
      iLevel = "iDone";
    }else{
      animateNext(i+1);
    }
  });
}

function startGame() {
  animateNext(1);
}

.animated{
  display: none;
}
.typing-effect {
  display: block;
  animation: typing-effect 5s steps(130, end), 0.75s step-end infinite;
  white-space: nowrap;
  overflow: hidden;
  border-right: 2px solid black;
}
.typing-effect:after {
  content: " ";
}
@keyframes typing-effect {
  0% {
    width: 0%;
  }
  100% {
    width: 100%;
  }
}
@keyframes blink-caret {
  from,
  to {
    border-color: transparent;
  }
  50% {
    border-color: black;
  }
}

<button onclick="startGame();">START GAME</button>

<div id="instructions">

  <div>
    <h2 id="h2_1" class="animated">Welcome to The Number Wizrd</h2>
  </div>

  <div>
    <h2 id="h2_2" class="animated">Adjfosdf</h2>
  </div>
  <div>
    <h2 id="h2_3" class="animated">sosidjfs</h2>
  </div>
  <div>
    <h2 id="h2_4" class="animated">difjspodf</h2>
  </div>
  <div>
    <h2 id="h2_5" class="animated">skidjfosidf</h2>
  </div>

</div>

【讨论】：

哇！这正是我一直在寻找的！我还没有完全听过/使用过您使用的一些关键字，但我会探索。谢谢！
Document.querySelector 更直观一点，恕我直言，因为您可以形成类似于 CSS 选择器的选择器。 Document.querySelectorAll 返回结果的节点列表（类似于数组）。让我知道是否还有其他需要澄清的部分。另外，如果这足以满足您的需求，请接受我的回答。编码愉快！

【解决方案2】：

你可以收听animationend事件，fe：

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

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

随机的东西：

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

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

【讨论】：