如何通过 JS 检测 CSS 过渡状态并跳过它

Question

考虑这样的 div：

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

它的风格：

#someid {

  transition: background-color 10s ease;

  background-color: #FF0000;

  height: 100px;

  width: 100px;

}

#someid:hover {

  background-color: #FFFFFF;

}

#someid如果可能的话，我希望有可能通过 JS 和/或结束动画检测状态（当前是否正在设置动画） 。我已经从这个答案中尝试过一件事：

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

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

关键是我需要检测元素现在是否正在动画，如果是，等待动画结束或立即结束，否则什么也不做

我已经找到了 transitionend事件，但是使用它我无法检测到元素目前是否正在动画。

Answer 1

您可以收听过渡事件并按需将其删除：const el = document.getElementById('transition');let isAnimating = false;el.addEventListener('transitionstart', function() {&nbsp; isAnimating = true;});el.addEventListener('transitionend', () => {&nbsp; isAnimating = false;});el.addEventListener('transitioncancel', () => {&nbsp; isAnimating = false;});function removeTransition(checkIfRunning) {&nbsp; if (checkIfRunning && !isAnimating) {&nbsp; &nbsp; return;&nbsp; }&nbsp; el.style.transition = "none";}#transition {&nbsp; width: 100px;&nbsp; height: 100px;&nbsp; background: rgba(255, 0, 0, 1);&nbsp; transition-property: transform background;&nbsp; transition-duration: 2s;&nbsp; transition-delay: 1s;}#transition:hover {&nbsp; transform: rotate(90deg);&nbsp; 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>