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

【问题标题】：The transitionend event is not firing consistently in FireFox without overflow hidden在没有隐藏溢出的情况下，transitionend 事件在 FireFox 中没有持续触发
【发布时间】：2023-03-10 08:10:01
【问题描述】：

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

【问题讨论】：

CodersClan 已经回答了这个问题。 codersclan.net/forum/ticket.php?ticket_id=34

标签： jquery html css firefox css-transitions

【解决方案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 回答

【讨论】：