JavaScript を使用して、さまざまなブラウザ間で CSS3 トランジション終了イベントを正規化するにはどうすればよいですか?

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

問題ステートメント:

異なるブラウザーでは、CSS3 遷移終了イベントは異なる方法でトリガーされます。 Webkit では「webkitTransitionEnd」、Firefox では「transitionEnd」、Opera では「oTransitionEnd」。純粋な 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);

このアプローチにより、ブラウザ間の互換性が確保され、ブラウザのスニッフィングや複数のイベントの割り当てが回避されます。

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