5

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

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

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

4

2 回答 2

2

以下是transitionend主要供应商（支持转换）的等价物：

  • 网络套件：webkitTransitionEnd
  • 歌剧：oTransitionEnd
  • IE 和 Mozilla：transitionend

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

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

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

于 2012-12-11T10:27:31.317 回答
1

从Modernizr docs，我假设您可以：

Modernizr.hasEvent('transitionEnd', $element)
于 2012-12-11T10:48:20.077 回答