4

我在 Firefox (v20.0.1) 上遇到了一个问题，它不会始终触发 transitionend 事件。如果我将overflow: hidden样式保留在动画 div 上，则效果很好。

我创建了一个示例来说明： http ://codepen.io/harryfino/full/jphis

此示例在 Chrome 和 IE10 中运行良好，但在 Firefox 中，您不会看到第二次单击时触发的 transitionend 事件。然后在第三次单击时，它将触发两次，并且两个元素都将被隐藏。如果您注释掉该page.removeClass('is-animating')行，它会正确触发事件。

关于删除的背景故事overflow: hidden：实际代码中的 div 溢出容器并且无法隐藏。

我想知道为什么它没有在第二次点击时触发事件，作为奖励，为什么overflow: hidden会影响它。

4

1 回答 1

2

正如@Orchestrator 建议的那样，这有望解决您的问题。

这是Firefox中的常见错误。我认为这是因为同时添加了两个类。解决方案非常简单 - 只需将 addClass 方法包装在 timeout 中：

setTimeout( function(){
 if (direction === 'in') {
   container.addClass('is-drilled-in');
 } else {
   container.removeClass('is-drilled-in');
 }
}, 50);

正如 Nikola Boychev @ codersclan 所回答的那样

于 2013-08-23T07:30:36.140 回答