CSS 遷移の完了を検出するにはどうすればよいですか?

CSS トランジションのコールバック

クエリ: CSS トランジションが完了したときに通知を受け取ることができますか?

回答: コールバックをサポートするブラウザでは、遷移の完了時にイベントがトリガーされます。イベントはブラウザによって異なります。

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

WebKit TransitionEnd の問題

webkitTransitionEnd は常にトリガーされるわけではないことに注意してください。これは、アニメーションが要素に目に見える影響を与えない場合に発生します。これを回避するには、イベントが期待どおりにトリガーされない場合にイベント ハンドラーを起動するタイムアウトを検討してください。

推奨コード構造

var transitionEndEventName = "XXX"; // Specify the appropriate event name
var elemToAnimate = ... // Element to be animated
var done = false;
var transitionEnded = function() {
    done = true;
    // Code to execute when transition finishes
    elemToAnimate.removeEventListener(transitionEndEventName, transitionEnded, false);
};
elemToAnimate.addEventListener(transitionEndEventName, transitionEnded, false);

// Animation triggering code here

// Fallback for browsers without event notifications
setTimeout(function() {
    if (!done) {
        transitionEnded();
    }
}, XXX); // Calculate XXX based on animation time and grace period

注: 「ブラウザ間で CSS3 Transition 関数を正規化するにはどうすればよいですか?」を参照してください。遷移イベント名を正規化するため。

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