如何确定元素内的所有动画何时结束？

Question

我正在尝试在包装器元素中的多个 CSS 动画完成后向包装器元素添加或删除 class。项目的数量及其动画持续时间可能会有所不同。动画是在 CSS classes 的帮助下描述的，一旦每个动画结束就会被删除。

  function transitionToShown() {
    backdrop.classList.add(CLASS_TRANSITIONING_IN);
    dialog.classList.add(CLASS_TRANSITIONING_IN);

    backdrop.addEventListener(
      "animationend",
      () => {
        backdrop.classList.remove(CLASS_TRANSITIONING_IN);
      },
      { once: true }
    );
    dialog.addEventListener(
      "animationend",
      () => {
        dialog.classList.remove(CLASS_TRANSITIONING_IN);
      },
      { once: true }
    );

    wrapper.addEventListener(
      ??How do I add/remove classes on the wrapper after animations on the dialog and backdrop have ended?? 
    );
  }

Answer 1

将 promises 与 Web 动画一起使用 API 似乎是一个简单的解决方案。即使 Web Animations API 被列为实验性的，它也得到了现代浏览器的广泛支持。

Promise.all(
  wrapper.getAnimations({ subtree: true }).map(function (animation) {
    return animation.finished;
  })
).then(function () {
  return wrapper.classList.remove(CLASS_SHOWN);
});

如何确定元素内的所有动画何时结束？

How do I determine when all animations inside an element have ended?

javascript

css-animations