javascript - 我可以检测任意 CSS 过渡是否已经开始

Question

在我的关闭函数中，我想在 css 转换完成运行后执行所有 DOM 清理工作。但是可能没有任何过渡运行/可能是多阶段过渡 -(维护样式表不在我的手中)。

我将如何着手编写如下所示的函数

function close () {
  myEl.removeClass('open');
  if (animation is running/about to be run) {
    // wait for transition to end, then recursively check to see if another 
    // one has started, wait for that ...
    // then
    cleanUpDOM(); 
  } else {
    cleanUpDOM(); 
  }
}

到目前为止，我的想法是将初始检查包装在 timeout/requestAnimationFrame 中，以便让动画有机会开始，然后检查它是否正在运行。不幸的是，如果没有 transitionstart 事件，我不知道如何检查转换是否已经开始。

编辑 推荐 jquery 的答案无关紧要，因为 jquery 动画是 javascript 动画，而不是 CSS 转换

Answer 1

关于 transitionStart 和 transitionEnd 事件:

过渡不能从零开始。通常过渡在某个事件之后开始，您可以通过按类或其他方式更改样式来更改 DOM 元素的状态。所以您知道转换何时开始，因为您在代码中启动了它。

在过渡期间，用户 I/O 不会阻塞，因此过渡是异步的，然后过渡将结束，你不知道对不对。所以你需要 transitionEnd 事件来做一些事情，然后在 javascript 中完成转换。

关于 transitionEnd 事件:看看jsfiddle