Question

我在OSX Safari中在同一窗口中打开了两个选项卡。我在第一个选项卡上有一个自定义的CSS3转换，我订阅了它的onTransitionEnd事件。它在正常情况下工作正常，但是当我重新加载页面并立即在第二个选项卡上切换时（第二个选项卡上的内容无关紧要），onTransitionEnd事件未在第一个选项卡上触发。

要重现此问题：

在Safari标签中打开此jsFiddle：http://jsfiddle.net/qzweoL6r/4/
等待警报，它应该告诉你过渡“已结束”
打开另一个标签，例如http://stackoverflow.com
导航回第一个标签（jsfiddle）并点击RUN并立即切换到第二个标签
等待4秒，正常情况下应该弹出警报，但没有
切换回第一个标签（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解决此浏览器问题？

Answer 1

我也在Chrome中看到此问题，并且已将其记录为bug for Firefox。 React JS和Bootstrap已经开发了涉及超时的JS解决方法，我认为在此期间需要完成的工作才能解决这个问题。

以下是此问题的转发和解决方法示例： https://github.com/Khan/react-components/blob/master/js/timeout-transition-group.jsx

当选项卡隐藏时，OSX Safari transitionEnd不会被触发

1 个答案: