检查转换是否将应用于元素

Question

我正在使用CSS过渡来动画从屏幕上移除元素。在FireFox中，我使用＆＃34; transitionend＆＃34;用于检测转换何时完成的事件，然后将其从DOM中删除。但这只适用于实际发生过渡的情况。

我如何从JavaScript中判断一个属性的变化是否最终会导致一个＆＃34; transitionend＆＃34;事件被发送？如果没有转换，那么我必须直接删除元素。

为清楚起见，我想知道财产的变化是否会触发事件（FireFox现在没问题）。这是因为我需要在转换结束时触发一个动作，如果没有转换，我需要立即触发它。

Answer 1

以下是主要供应商（支持转换）的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/

Answer 2

从Modernizr docs，我假设你可以：

Modernizr.hasEvent('transitionEnd', $element)