Question

我在Firefox（v20.0.1）上遇到了一个问题，它不会一直触发transitionend事件。如果我在动画div上保留overflow: hidden样式，它就可以正常工作。

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

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

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

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

Answer 1

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

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

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

由Nikola Boychev @ codersclan

回答

在没有溢出隐藏的情况下，在FireFox中不会始终触发transitionend事件

1 个答案: