考虑这样的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 和/或结束动画。我尝试了 this answer 中的一个东西:document.querySelector("#someid").style.transition = "none";
但它不适用于当前的动画元素。关键是我需要检测元素现在是否正在动画,如果是,则等待动画结束或立即结束,否则什么也不做
我已经 found
transitionend
事件,但使用它我无法检测元素是否正在动画。
最佳答案
您可以收听转换事件并根据需要将其删除:
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>
关于javascript - 如何通过 JS 检测 CSS 转换的状态并跳过它,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/64165709/