JavaScript で次の競合状態があります。
<h1>some title</h1>（ CSS3トランジションを使用して、AJAXが成功した後にフェードアウトおよびフェードインすることです）：
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 がそれをアニメーション化する方法を知らないためです。クロムはそれを処理できると言われています。
新しいユーザーが UI をクリックすると、元の AJAX がキャンセルされ、新しい AJAX が起動されます。
は.fading-outでopacity: 0あり、not-displayはdisplay: noneです。
私が疑うのはdisplay: none、「フェードアウト」フェーズ中に何らかの形でキックインされ、アニメーションがキャンセルされたため、遷移が中止されたため、transitionendイベントが発生せず、アイテムが再表示されなかったということです。 in 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/