不使用事件,可以使用JavaScript的getComputedStyle
方法来检查CSS过渡是否完成。getComputedStyle
方法可以获取元素的实际样式,通过获取过渡属性的值来判断过渡是否完成。
以下是一个示例代码:
HTML:
CSS:
#target {
transition: width 2s;
}
JavaScript:
var target = document.getElementById('target');
target.style.width = '200px';
var transitionCompleted = checkTransitionCompletion(target);
console.log(transitionCompleted);
function checkTransitionCompletion(element) {
var computedStyle = window.getComputedStyle(element);
var transitionDuration = computedStyle.transitionDuration;
// 如果transitionDuration为0s或undefined,则过渡已完成
if (transitionDuration === '0s' || !transitionDuration) {
return true;
} else {
return false;
}
}
在上述代码中,首先通过getComputedStyle
方法获取目标元素的过渡属性值,然后判断该值是否为0s或undefined,如果是则说明过渡已完成,返回true;否则返回false。
需注意的是,该方法只能检查过渡是否完成,无法检查过渡效果的具体状态。如果需要更精确的过渡状态检查,仍然需要使用过渡事件来判断。