異なるブラウザ間で CSS3 トランジション終了イベントを確実に検出して処理するにはどうすればよいですか?

CSS3 トランジション終了イベントのブラウザ間での正規化

ブラウザ間で異なる CSS3 トランジション終了イベント名を処理するのは難しい場合があります。この問題に対処するためのいくつかのアプローチを次に示します。

ブラウザ スニッフィング

次に示すように、1 つのアプローチはブラウザ スニッフィングです。

var transitionend = (isSafari) ? "webkitTransitionEnd" : (isFirefox) ? "transitionEnd" : (isOpera) ? "oTransitionEnd" : "transitionend";

element.addEventListener(transitionend, function() {
  // Do something
}, false);

このメソッド特定のブラウザ ユーザー エージェントをチェックし、適切なイベント名を割り当てます。ただし、事前定義された特定のルールに依存しており、すべてのブラウザのバージョンや潜在的なバリエーションを考慮していない場合があります。

複数のイベント リスナー

または、複数のイベント リスナーをアタッチすることもできます。サポートされている各ブラウザ イベント名:

element.addEventListener("webkitTransitionEnd", fn);
element.addEventListener("oTransitionEnd", fn);
element.addEventListener("transitionEnd", fn);

function fn() {
  // Do something
}

このアプローチでは、サポートされているすべてのイベントが処理されますが、不必要なイベント処理が発生する可能性があります。

Modernizr の改良された手法

より堅牢でブラウザ間をまたぐアプローチは、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];
    }
  }

  throw 'TransitionEnd event is not supported in this browser'; 
}

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

この手法はブラウザーのスニッフィングを回避し、サポートされているイベント名を以下に基づいて動的に検出します。要素でサポートされている CSS プロパティ。

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