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

考虑这样的div：

它的风格：

#someid{
过渡：背景色10秒轻松；
背景色：#FF0000；
高度：100px；
宽度：100px；
}
#悬停{
背景色：#FFFFFF；
}

我希望能够通过JS和/或结束动画（如果可能的话）检测

#someid

的状态（当前是否设置动画）。我试过一件事：

document.querySelector（“#someid”）.style.transition=“无”；

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

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

---

我已经设置了transitionend事件，但使用它我无法检测元素当前是否正在动画中。

您可以收听transition事件并根据需要将其删除：

const el=document.getElementById（'transition'）；
让isAnimating=false；
el.addEventListener（'transitionstart'，function（）{
isAnimating=true；
});
el.addEventListener（'transitionend'，（）=>{
isAnimating=假；
});
el.addEventListener（'transitioncancel'，（）=>{
isAnimating=假；
});
函数removeTransition（checkIfRunning）{
如果（检查是否正在运行&&！isAnimating）{
返回；
}
el.style.transition=“无”；
}

#转换{
宽度：100px；
高度：100px；
背景：rgba（255,0,0,1）；
过渡特性：变换背景；
过渡时间：2s；
过渡延迟：1s；
}
#过渡：悬停{
变换：旋转（90度）；
背景：rgba（255,0,0,0）；
}

你好，世界


删除过渡




如果运行

I可能是错误的，但我认为这不可能在运行时获取当前状态@Crocsx好的，但是否可以删除过渡属性以便动画结束？@fas看一下我的代码，它会在过渡结束后立即删除过渡，而您在结束后将不再看到它。@DipenShah在过渡结束后立即删除过渡我需要删除正在进行的过渡您可以在运行AnimationPlayState时暂停，或者，您可以将转换设置为特定的css选择器，当您想要强制停止动画时，可以从div中删除该选择器。但在对答案的评论中，你还有其他选择。但基本上用CSS你控制它，他不会为你更新^^^这可能是一个误解，但我需要检测元素现在是否正在动画，如果是，等待动画结束或立即结束，否则什么也不做。更新的问题。所以在我的代码中，我在结尾处删除了转换，但你可以修改它，在开始和结束之间随时触发取消转换事件，它应该会取消它。让我更新一下我的代码。@fas只要触发了

transitionstart

事件，您就可以假定它当前正在转换，直到

transitionend

。您可以设置一个外部变量

isAnimating

，如果它更适合您的用例？请看我的更新，我添加了删除转换按钮，以便在任何时候单击时删除转换。由于这些事件确实存在气泡，您甚至可以构建一个更不可知的列表：