在FireFox中，如果没有设置overflow:hidden属性，transitionend事件不会始终触发。

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会影响它。

- harryfino

---

这个问题已经在CodersClan上得到了解答。http://www.codersclan.net/forum/ticket.php?ticket_id=34 - Dror

Answer 1

如@Orchestrator所建议的，这将有望解决您的问题。

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

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

< p > 由Nikola Boychev @ codersclan回答

- miphe