如何通过JS检测CSS转换状态并跳过

考虑div：

<div id="someid"></div>

和样式：

#someid {
  transition: background-color 10s ease;
  background-color: #FF0000;
  height: 100px;
  width: 100px;
}

#someid:hover {
  background-color: #FFFFFF;
}

我希望能够通过JS检测#someid的状态(当前是否处于动画状态)和/或结束动画(如果可能)。我尝试了this answer中的内容：

document.querySelector("#someid").style.transition = "none";

但它不适用于当前动画元素。

重点是我需要检测元素现在是否处于动画状态，如果是，请等待动画结束或立即结束，否则什么都不做

我已经foundtransitionend事件，但使用它无法检测元素当前是否处于动画状态。

---

解决方案

您可以监听转换事件并按需删除：

const el = document.getElementById('transition');
let isAnimating = false;

el.addEventListener('transitionstart', function() {
  isAnimating = true;
});

el.addEventListener('transitionend', () => {
  isAnimating = false;
});

el.addEventListener('transitioncancel', () => {
  isAnimating = false;
});

function removeTransition(checkIfRunning) {
  if (checkIfRunning && !isAnimating) {
    return;
  }

  el.style.transition = "none";
}

#transition {
  width: 100px;
  height: 100px;
  background: rgba(255, 0, 0, 1);
  transition-property: transform background;
  transition-duration: 2s;
  transition-delay: 1s;
}

#transition:hover {
  transform: rotate(90deg);
  background: rgba(255, 0, 0, 0);
}

<div id="transition">Hello World</div>
<br />
<button onclick="removeTransition(false)">Remove Transition</button>
<br />
<br />
<button onclick="removeTransition(true)">Remove Transition on if running</button>