本文介绍了如何通过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;
}
#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>这篇关于如何通过JS检测CSS转换状态并跳过的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！
本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除！