異なるブラウザ間で CSS3 トランジション終了イベントを正規化するにはどうすればよいですか?

CSS3 遷移終了イベントのブラウザ間での正規化

Web 開発では、異なるブラウザ間で遷移終了イベントを処理することが課題となることがあります。ブラウザの不一致。 WebKit、Firefox、Opera などのブラウザは、この目的で個別のイベント名を使用するため、ブラウザ間の正規化が必要になります。

この問題に対処するには、いくつかのアプローチがあります。

• ブラウザ スニッフィング: ブラウザの種類を検出し、適切なイベント名を割り当てます。ただし、新しいブラウザでは新しいイベントが導入される可能性があるため、この方法は信頼できません。
• 個別のイベント リスナー: ブラウザ固有のイベントごとに個別のイベント リスナーを追加します。このアプローチはより包括的ですが、コードの肥大化やメンテナンスの問題が発生する可能性があります。

より洗練された解決策には、適切なイベント名を動的に決定する JavaScript 関数の利用が含まれます。この手法は、Modernizr ライブラリで採用されている機能検出の概念を利用しています。

function transitionEndEventName() {
    var el = document.createElement('div'),
        transitions = {
            'transition':'transitionend',
            'OTransition':'otransitionend',
            'MozTransition':'transitionend',
            'WebkitTransition':'webkitTransitionEnd'
        };

    for (var i in transitions) {
        if (transitions.hasOwnProperty(i) && el.style[i] !== undefined) {
            return transitions[i];
        }
    }
}

この関数は、サポートされているすべての遷移プロパティを反復処理し、対応するイベント名を返します。取得したら、この関数を使用してイベント リスナーを割り当てるだけです。

var transitionEnd = transitionEndEventName();
element.addEventListener(transitionEnd, theFunctionToInvoke, false);

このアプローチを利用すると、ブラウザ間で遷移終了イベントの処理を正規化し、一貫した動作を保証し、コードを簡素化できます。

以上が異なるブラウザ間で CSS3 トランジション終了イベントを正規化するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。