web-dev-qa-db-ja.com

ブラウザ間でCSS3 Transition関数を正規化するにはどうすればよいですか？

Webkitの移行終了イベントはwebkitTransitionEndと呼ばれ、FirefoxはtransitionEnd、opera is 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
}
javascriptcssjavascript-eventscss3css-transitions
88
methodofaction

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);
164
webinista

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
}
22
methodofaction

更新

以下はそれを行うよりクリーンな方法であり、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

8
Tom

JQueryとBootstrap $.support.transition.endは、現在のブラウザの正しいイベントを返します。

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

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

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

8
meleyal

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);
6
Salman for Hire

ここにもっときれいな方法があります

 function transitionEvent() {
      // Create a fake element
      var el = document.createElement("div");

      if(el.style.OTransition) return "oTransitionEnd";
      if(el.style.WebkitTransition) return "webkitTransitionEnd";
      return "transitionend";
    }
1
Nicholas

このようなコードを使用します（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();
});
0
Rich Bradshaw

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() { ... });
0
Are Butuv

2つ目は進むべき道です。すべてのブラウザーでこれらのイベントの1つのみが起動するため、すべてのイベントを設定できます。

0
Lea Verou

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'),
0
Joe Heyming