2

我在 JavaScript 中有以下竞争条件：

（就是AJAX成功后淡出淡入<h1>some title</h1>，使用CSS3过渡）：

AJAX success handler
    add the "fading-out" CSS class
wait for "transitionend" event -- 
    add the "not-display" CSS class
    call a callback function, which does the following:
        change the title by $("#some-id").html("another title");
        remove "not-display"
        after 20ms, remove "fading-out" (by using a setTimeout)

情况是，如果我慢慢点击 UI，那么一切正常，但如果我继续点击 UI 并让新的 AJAX 被触发，那么在大约 20 次点击后，“transitionend”永远不会被触发，有时它会发生，有时不是。

20ms 是由于 Firefox 和 IE 不知道如何在同时删除“不显示”和“淡出”的情况下对其进行动画处理。据说Chrome能够处理它。

任何新用户点击 UI 都会取消原来的 AJAX 并触发一个新的 AJAX。

是.fading-out一个opacity: 0并且not-display是一个display: none。

我怀疑是display: none在“淡出”阶段以某种方式启动，并取消了动画，因此中止了转换，因此该transitionend事件从未被触发，因此该项目从未重新显示，如所述对于JavaScript 或 jQuery，如何使 transitionend 事件不触发？

但我想知道这种情况或任何其他情况是否可能是一个可能的原因，以及什么可以解决。欢迎任何见解。

（我也在想，如果这个逻辑可以有一个标志，表示如果它用于淡出和淡入，那么不要display: none一路设置，这样也不会涉及20ms的延迟）。

更新：想一想，如果在那个 20 毫秒的窗口内，AJAX 成功处理程序添加了fading-out类，然后 20 毫秒的延迟结束并删除了fading-out类，是否足以淡出和淡入来触发transitionend? 或者，如果添加和删除发生在同一个事件周期中怎么办？看起来在 Chrome 中，即使是下一个周期，transitionend也会发生：http: //jsfiddle.net/HA8s2/36/但如果在同一个周期，则transitionend不会发生：http: //jsfiddle.net/ HA8s2/37/

4

0 回答 0