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

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的回答