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

2023年10月11日 107次阅读

我在Firefox(v20.0.1)上遇到了一个问题,它不会一直触发transitionend事件.如果我在动画div上保留溢出：隐藏的样式,它可以正常工作.

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

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

关于删除溢出的背景故事：隐藏：实际代码中有溢出容器的div,无法隐藏.

我想知道为什么它没有在第二次点击时触发事件,作为奖励,为什么溢出：隐藏正在影响它.

最佳答案 正如@Orchestrator建议的那样,这有望解决您的问题.

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

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

正如Nikola Boychev @ codersclan所回答

点赞