javascript - ブラウザー間で CSS3 遷移終了イベントを正規化するにはどうすればよいですか?

Question

Webkit の遷移終了イベントは webkitTransitionEnd、Firefox は transitionEnd、opera は oTransitionEnd と呼ばれます。純粋なJSでそれらすべてに取り組む良い方法は何ですか? ブラウザのスニッフィングを行う必要がありますか? またはそれぞれを個別に実装しますか？私には思い浮かばなかった他の方法はありますか？

すなわち:

//doing browser sniffing
var transitionend = (isSafari) ? "webkitTransitionEnd" : (isFirefox) ? "transitionEnd" : (isOpera) ? "oTransitionEnd";

element.addEventListener(transitionend, function(){
  //do whatever
},false);

また

// Assigning an event listener per browser
element.addEventListener("webkitTransitionEnd", fn);
element.addEventListener("oTransitionEnd", fn);
element.addEventListener("transitionEnd", fn);

function fn() {
   //do whatever
}

score 166 · Accepted Answer

Modernizr で使用されている、改善された手法があります。

function transitionEndEventName () {
    var i,
        undefined,
        el = document.createElement('div'),
        transitions = {
            'transition':'transitionend',
            'OTransition':'otransitionend',  // oTransitionEnd in very old Opera
            'MozTransition':'transitionend',
            'WebkitTransition':'webkitTransitionEnd'
        };

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

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

その後、遷移終了イベントが必要なときはいつでもこの関数を呼び出すことができます:

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

score 22 · Accepted Answer

Matijs のコメントによると、遷移イベントを検出する最も簡単な方法は、ライブラリ (この場合は jquery) を使用することです。

$("div").bind("webkitTransitionEnd.done oTransitionEnd.done otransitionend.done transitionend.done msTransitionEnd.done", function(){
  // Unlisten called events by namespace,
  // to prevent multiple event calls. (See comment)
  // By the way, .done can be anything you like ;)
  $(this).off('.done')
});

ライブラリのない JavaScript では、少し冗長になります。

element.addEventListener('webkitTransitionEnd', callfunction, false);
element.addEventListener('oTransitionEnd', callfunction, false);
element.addEventListener('transitionend', callfunction, false);
element.addEventListener('msTransitionEnd', callfunction, false);

function callfunction() {
   //do whatever
}

score 8 · Accepted Answer

アップデート

以下はそれを行うためのよりクリーンな方法であり、modernizr は必要ありません。

$(".myClass").one('transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd', 
function() {
 //do something
});

あるいは

var transEndEventNames = {
        'WebkitTransition': 'webkitTransitionEnd',
        'MozTransition': 'transitionend',
        'OTransition': 'oTransitionEnd otransitionend',
        'msTransition': 'MSTransitionEnd',
        'transition': 'transitionend'
    }, transitionEnd = transEndEventNames[Modernizr.prefixed('transition')];

これは Modernizr によって提案されたコードに基づいていますが、Opera の新しいバージョン用の追加のイベントがあります。

http://modernizr.com/docs/#prefixed

score 8 · Accepted Answer

jQuery と Bootstrap を使用すると$.support.transition.end、現在のブラウザに適切なイベントが返されます。

これはBootstrap で定義され、そのアニメーションコールバックで使用されますが、jQuery のドキュメントではこれらのプロパティに依存しないと書かれています。

これらのプロパティの一部は以下に記載されていますが、長い非推奨/削除サイクルの対象ではなく、内部の jQuery コードで不要になった時点で削除される可能性があります。

http://api.jquery.com/jQuery.support/

score 6 · Accepted Answer

2015 年現在、このワンライナーで対処する必要があります (IE 10 以降、Chrome 1 以降、Safari 3.2 以降、FF 4 以降、Opera 12 以降):-

var transEndEventName = ('WebkitTransition' in document.documentElement.style) ? 'webkitTransitionEnd' : 'transitionend'

イベントリスナーのアタッチは簡単です:-

element.addEventListener(transEndEventName , theFunctionToInvoke);

score 1 · Accepted Answer

2つ目は行き方です。すべてのブラウザーでこれらのイベントの 1 つだけが発生するため、それらすべてを設定するだけで機能します。

score 0 · Accepted Answer

私はこのようなコードを使用します（jQueryで）

var vP = "";
var transitionEnd = "transitionend";
if ($.browser.webkit) {
    vP = "-webkit-";
    transitionEnd = "webkitTransitionEnd";
} else if ($.browser.msie) {
    vP = "-ms-";
} else if ($.browser.mozilla) {
    vP = "-moz-";
} else if ($.browser.opera) {
    vP = "-o-";
    transitionEnd = "otransitionend"; //oTransitionEnd for very old Opera
}

これにより、JSを使用して、プロパティと連結されたvPを指定することで追加できます。ブラウザーにヒットしなかった場合は、標準を使用します。イベントを使用すると、次のように簡単にバインドできます。

object.bind(transitionEnd,function(){
    callback();
});

score 0 · Accepted Answer

Google の閉鎖により、これを行う必要がなくなります。要素がある場合:

goog.events.listen(element, goog.events.EventType.TRANSITIONEND, function(event) {
  // ... your code here
});

goog.events.eventtype.js のソースを見ると、TRANSITIONEND は useragent を見て計算されます。

// CSS transition events. Based on the browser support described at:
  // https://developer.mozilla.org/en/css/css_transitions#Browser_compatibility
  TRANSITIONEND: goog.userAgent.WEBKIT ? 'webkitTransitionEnd' :
      (goog.userAgent.OPERA ? 'oTransitionEnd' : 'transitionend'),

score 0 · Accepted Answer

jquery オーバーライド:

(function ($) {
  var oldOn = $.fn.on;

  $.fn.on = function (types, selector, data, fn, /*INTERNAL*/ one) {
    if (types === 'transitionend') {
      types = 'transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd';
    }

    return oldOn.call(this, types, selector, data, fn, one);
  };
})(jQuery);

そして次のような使い方：

$('myDiv').on('transitionend', function() { ... });

javascript - ブラウザー間で CSS3 遷移終了イベントを正規化するにはどうすればよいですか?

11 に答える 11

Related

Reference