javascript - 检查是否将过渡应用于元素

我正在使用CSS过渡为从屏幕上移除元素的动画设置动画。在FireFox中，我使用“transitionend”事件来检测转换完成的时间，然后将其从DOM中删除。但是，这仅在实际发生过渡时才起作用。

如何通过JavaScript判断属性的更改是否最终会导致发送“transitionend”事件？如果没有过渡，那么我必须直接删除该元素。

为了清楚起见，我想知道属性的更改是否会触发事件(FireFox现在可以使用)。这是因为我需要在过渡结束时触发一个 Action ，如果没有过渡，则需要立即触发它。

最佳答案

以下是主要供应商(支持过渡)的transitionend的等效项:

Webkit:webkitTransitionEnd

Opera:oTransitionEnd

IE和Mozilla:transitionend

要确定该属性是否正在设置动画，只需检查它是否立即达到了目标值:

el = $('myElement');
el.css('top', '100px');
if(!el.css('top') == '100px'){
    alert('No transition');
}

这是一个演示:http://jsfiddle.net/6Q9XC/