JavaScript で次の競合状態があります。

<h1>some title</h1>（ CSS3トランジションを使用して、AJAXが成功した後にフェードアウトおよびフェードインすることです）：

状況としては、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/

サポートしていないブラウザーで bind transitionend を処理するにはどうすればよいですか?

私が持っている場合

どうすればie8で動作させることができますか? ブラウザがサポートしている場合は「transitionend」、サポートしていない場合は「change」を含む文字列を作成しようとしましたが、それは良い考えではないと思います。

なにか提案を？

特にすべての主要なブラウザで実際に機能する方法で、ブラウザが transitionend イベントをvanillaJsでサポートしているかどうかを検出する簡単な方法を見つけた人はいますか? :(

私はここでこの未回答のスレッドを見つけました: Test for transitionend event support in Firefox、およびかなり多くのほとんど機能するハック。

現在、すべてのベンダープレフィックスにイベントリスナーを一括で追加していますが、うまくいきます (見るたびに目を痛める恐ろしいアプローチだとは思いますが)。しかし、IE8 と IE9 ではまったくサポートされていないため、これら 2 つを検出して、別々に処理する必要があります。

私はこれをブラウザのスニッフィングなしで、そして間違いなくjQueryのような巨大なライブラリ/フレームワークなしで行うことを好みます

私の問題を説明する jsfiddler スニペットを作成しました。ダイアログを表示するボタンがあります。閉じるをクリックしてダイアログを削除すると、上部と不透明度で遷移し、遷移が終了した後は display=none になるはずです。ただし、transitionend が起動されない場合 (IE8 や IE9 のように)、ダイアログは削除されず、[ダイアログの表示] ボタンを覆い隠し、UX を破壊します。transitionend が機能していないことを検出できれば、それらのブラウザーを閉じるときに display=none を設定するだけで済みます。

http://jsfiddle.net/QJwzF/22/

Opera、Firefox、Chrome、IE10 では動作しますが、IE8 と IE9 では動作しません (afaik)

問題をうまく説明できなかった場合は、お知らせください。:)

次のコードは、Chrome だけでなく Firefox ('transitionend' を使用) でも動作に一貫性がありません。機能slogan_fade_nextはただconsole.log('end');です。クラス名は常に最初のスパン要素に適用されますが、それ以降は、更新ボタンをクリックしたり、再読み込みしたり、その他の何かをクリックしたときに失敗します。

slogan-fadein適用先のクラスはslogan[]要素の不透明度を 0 から 1 に変更しますが、コールバック関数fade_setupは一貫して呼び出されません。

製品のコードがイベントtransitionendを要素にバインドするという問題が発生しました。ただし、このイベントは Chrome 33、Safari 7.0.2、および Safari 6.1 ではトリガーされません。私のコードは Firefox 27.0.1 で正常に動作します。私のコードは、Chrome の古いバージョン (25 や Safari の 6.0.5 など) でもうまく機能していました。

だから私はこの問題を再現し始めました。以下は再現コードです。

jsFiddle: http://jsfiddle.net/PPRJX

再生コードは Safari 7.0.2 では機能しません。ただし、Chrome 33 では動作します。

コードを最新の Chrome と Safari で動作させたい。transitionend私の再生コードから、 Safari では動作せず、Chrome では動作することがわかります。しかし、私の製品では、Chrome でも動作しません。

どうもありがとうございました！

以前の JS トランジションでは、コールバックを介してトランジション後に発生する動作を指定できました。例えば

CSS3 トランジションを使用すると、次のようなことができます。

私は新しい transitionend イベントを知っているので、次のようなことができると仮定します:

しかし、現在 UI から JS を分離しているため、他の誰かがコンテンツ非表示が瞬時に行われる新しい UI を作成し、CSS3 トランジションを削除し、不注意で JS 呼び出しを強制的に中断する可能性があります。

別のシナリオでは、ボックスがあり、そのボックスのサイズを 50x50 (トランジションあり) に変更してから、mandatoryLogicAfterResize() を呼び出すリセット関数があるとします。リセット fn を 2 回呼び出した場合、この場合に遷移イベントが発生することが保証されているとは思いませんが、両方の回を実行するには、mandatoryLogicAfterResize が必要です。

より複雑なコードベースでは、ターゲットにしている特定のトランジションの前に他のトランジションが呼び出されることも心配しています。そして、mandatoryLogic() を時期尚早にトリガーします。ここでの中心的な問題は、CSS3 トランジションを使用して、jQuery コールバックでできるように、mandatoryLogicAfterHidingContent() イベント ハンドラーを自分だけの の呼び出しと防御的に結びつけるにはどうすればよいかということだと思います。addClass('hidden')

状況

• DIV1は.rightnav.frontをクリック。
• DIV1が右に移動し、不透明度が下がる
• DIV1 は左に戻り、完了時に不透明度は 0 です
• DIV1 はクラス .hidden と .offset を取得して非表示にし、画面外に移動するため、クリックできなくなります..
• 次の DIV (テスト目的で id 2 の DIV) では、隠しクラスとオフセット クラスが削除され、次のクリック イベントのターゲットになります。

問題

DIV は右に移動しますが、非表示になる前に左に移動しません (元に戻ります)。試してみるには、一番下の Codepen を参照してください。

ここには JavaScript コードのみを掲載しています。CSS と HTML は codepen にあります。

ここにjQueryコードがあります

コードペン

ライブ テストの CodePen.IO リンクは次のとおりです: http://codepen.io/nygter/pen/QbpegM