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

Question

我正在使用CSS过渡来动画从屏幕上删除元素。在 FireFox 中，我使用 "transitionend" 事件来检测转换何时完成，然后将其从 DOM 中删除。但是，这仅在实际发生转换时才有效。

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

为了清楚起见，我想知道属性的更改是否会触发事件（FireFox 现在很好）。这是因为我需要在过渡结束时触发一个动作，如果没有过渡，我需要立即触发它。

Answer 1

以下是

主要供应商（支持转换）transitionend的等效项：

• 网络套件：webkitTransitionEnd
• 歌剧：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 文档中，我假设您可以：

Modernizr.hasEvent('transitionEnd', $element)