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

Question

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

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

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

Answer 1

以下是主要 vendor (支持转换)的 transitionend 的等效项:

• Webkit: webkitTransitionEnd
• 歌剧:oTransitionEnd
• IE 和 Mozilla:transitionend

要了解属性是否正在动画，只需检查它是否已立即达到目标值:

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

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