OSX Safari在标签页隐藏时无法触发transitionEnd事件

Question

我在OSX Safari中同一窗口打开了两个标签页。我在第一个标签页上使用了自定义的CSS3过渡效果，并订阅了其onTransitionEnd事件。在正常情况下，它能够正常工作，但是当我重新加载页面并立即切换到第二个标签页时（第二个标签页上显示的内容无关紧要），第一个标签页上的onTransitionEnd事件没有被触发。

复现问题的步骤如下：

1. 在Safari标签页中打开这个jsFiddle：http://jsfiddle.net/qzweoL6r/4/ 2. 等待弹出警告，它应该告诉你过渡效果已经“结束”

3. 打开另一个标签页，例如http://stackoverflow.com 4. 返回到第一个标签页(jsfiddle)，点击RUN并立即切换到第二个标签页

5. 等待4秒钟，在正常情况下，弹出警告，但什么也没有发生

6. 切换回第一个标签页(jsfiddle)，如果你在步骤4中没有看到警告，现在你应该会看到它，但是仍然没有任何反应，只有div的宽度改变为400px的过渡值。

setTimeout(function() {
  $('div').one('webkitTransitionEnd transitionend', function() {
      alert('ended');
    })
    .addClass('active');
}, 2000);

div {
  width: 200px;
  height: 200px;
  background: #f00;
  transition: all 2s linear;
}
div.active {
  width: 400px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div></div>

你有没有想过如何用JavaScript解决这个浏览器问题？

- Roland Soós

Answer 1

我也在Chrome中遇到了这个问题，这已经在Firefox的错误日志中记录了下来。React JS和Bootstrap已经开发了涉及超时的JS解决方案，我认为在浏览器修复此问题之前，需要采取这些措施。

以下是一个transitionend解决方案的示例，适用于此问题： https://github.com/Khan/react-components/blob/master/js/timeout-transition-group.jsx

- Willster