ブラウザ間での CSS 遷移の完了を確実に検出するにはどうすればよいですか?

イベント駆動型 CSS トランジション: トランジションの完了の検出

CSS トランジションを使用する場合、トランジションが終了したときに通知を受け取ることが望ましいことがよくあります。完成しました。幸いなことに、最新のブラウザには、遷移の終了時にトリガーされるイベントが用意されており、コールバック機能の実装が容易になります。

ブラウザ間でのイベント名

遷移完了の特定のイベント名は、ブラウザごとに異なります。ブラウザ:

• Webkit (Chrome、Safari): webkitTransitionEnd
• Firefox:transitionend
• IE9 :msTransitionEnd
• Opera:oTransitionEnd

イベント処理の実装

実装するにはCSS 遷移が完了したときにコールバック関数を実行するには、次の手順に従います。

1. 使用するブラウザに適切な遷移イベント名を決定します。
2. 遷移中の要素にイベント リスナーを追加します。

elemToAnimate.addEventListener(transitionEndEventName, transitionEnded);

3. トランジション時に必要なアクションを実行するために、transitionEnded コールバック関数を定義します。

ただし、webkitTransitionEnd イベントは常に一貫して発生するとは限らないことに注意することが重要です。これを考慮して、イベント ハンドラーが期待どおりにトリガーされない場合にイベント ハンドラーを呼び出すタイムアウトを設定することをお勧めします。

フォールバック タイムアウト

setTimeout(function(){
    if(!done){
        console.log("timeout needed to call transition ended..");
        transitionEnded();
    }
}, requiredTimeForAnimation);

を組み込むことにより、タイムアウトフォールバックを使用すると、遷移イベントが実行されない場合でもコールバックが確実に実行されるようにすることができます。 fire.

遷移イベント名の取得

「ブラウザ間で CSS3 遷移関数を正規化するにはどうすればよいですか?」という質問への回答で概説された方法。現在のブラウザでサポートされている遷移イベント名を確認するために使用できます。

追加リソース

• CSS3 による遷移の処理
• CSS3 遷移イベント

以上がブラウザ間での CSS 遷移の完了を確実に検出するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。