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

Posted 2023-03-06

【中文标题】在没有隐藏溢出的情况下，transitionend 事件在 FireFox 中没有持续触发

【英文标题】：The transitionend event is not firing consistently in FireFox without overflow hidden

【发布时间】：2013-04-19 19:45:13

【问题描述】：

我在 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

【参考方案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 回答