異なるブラウザ間で CSS 遷移が完了したときに通知を受け取るにはどうすればよいですか?

CSS 移行完了の通知

CSS 移行が完了したときに、移行後のアクションを開始するための通知を受け取ることは重要です。幸いなことに、ブラウザには遷移完了時にトリガーされるイベントが用意されているため、開発者はコールバック関数を登録できます。

ブラウザ固有のイベント名

ただし、ブラウザはブラウザ依存のイベント名を利用します:

• Webkit ブラウザ (Chrome、Safari): webkitTransitionEnd
• Firefox: transitionend
• IE9 : msTransitionEnd
• Opera: oTransitionEnd

webkitTransitionEnd の落とし穴

特にアニメーション効果が存在しない場合、webkitTransitionEnd は常に起動するとは限らないことに注意してください。要素への顕著な影響。これを軽減するには、イベント ハンドラーが期待どおりにトリガーされない場合にタイムアウトを使用してイベント ハンドラーを実行します。

コード例

次のコードは、このイベントの使用法を示しています。

var transitionEndEventName = "XXX"; //figure out, e.g. "webkitTransitionEnd".. 
var elemToAnimate = ... //the thing you want to animate..
var done = false;
var transitionEnded = function(){
     done = true;
     //do your transition finished stuff..
     elemToAnimate.removeEventListener(transitionEndEventName,
                                        transitionEnded, false);
};
elemToAnimate.addEventListener(transitionEndEventName,
                                transitionEnded, false);

//animation triggering code here..

//ensure tidy up if event doesn't fire..
setTimeout(function(){
    if(!done){
        console.log("timeout needed to call transition ended..");
        transitionEnded();
    }
}, XXX); //note: XXX should be the time required for the
        //animation to complete plus a grace period (e.g. 10ms) 

ブラウザの互換性に関する注意

特定のブラウザに適切な遷移イベント名を決定するには、で強調表示されている方法を利用してください。 「ブラウザ間で CSS3 Transition 関数を正規化するにはどうすればよいですか?」

以上が異なるブラウザ間で CSS 遷移が完了したときに通知を受け取るにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。