4

Android 4.0 から 4.1 へのアップデートで、ストック ブラウザと webView の css トランジション プレフィックスが変更されていることに気付きました。

基本的に「transition」と「webkitTrantion」の両方が定義されています。

Modernizr.prefixed("transition") は Android 4.0 で webkitTrantion を返します Modernizr.prefixed("transition") は Android 4.1 で trantion を返します

ただし、遷移終了イベント名については、「transitionend」イベントが定義されていない/動作しません。Webkit 固有の「webkitTransitionEnd」イベント名を使用する必要があります。

質問: この変更に関するドキュメントが見つからないため、どのように進めればよいかわかりません... 誰かこれを明らかにできますか? ドキュメントへの提案やリンクは大歓迎です!

再現するには:

function whichTransitionEvent(){
    var t;
    var el = document.createElement('fakeelement');
    var transitions = {
        'OTransition':'oTransitionEnd',
        'MSTransition':'msTransitionEnd',
        'MozTransition':'transitionend',
        'WebkitTransition':'webkitTransitionEnd',
        'transition':'transitionEnd'
    }

    for(t in transitions){
        if( el.style[t] !== undefined ){
            alert (transitions[t]);
        }
    }
}

上記のコードでは、android 4.0 では 1 つのポップアップのみが表示され、4.1 以降では android 4.1 では 2 つのポップアップが表示されます。「transition」と「webkitTransition」の両方が有効です。

4

1 に答える 1

3

デスクトップのChromeとSamsungデバイスのAndroidが実際に使用したものとは別のイベント名を報告するという同様の問題がありました. 彼らが実際に使用しているものを見つける唯一の方法は、イベントをトリガーし、いくつかの異なるイベントリスナーを設定し、トリガーされたものを確認することです。以下のコード (このgist から) は基本的にこれを行い、Modernizr.transitionEnd をそのイベント名に設定します。

var $M = window.Modernizr
var _ = window._ // underscore.js

// Defines prefixed versions of the
// transitionEnd event handler
transitionFinishedEvents = {
  'WebkitTransition' : 'webkitTransitionEnd',
  'MozTransition'    : 'transitionend',
  'OTransition'      : 'oTransitionEnd',
  'msTransition'     : 'msTransitionEnd',
  'transition'       : 'transitionEnd'
};

// Feature detect actual transitionEnd keyword by triggering an event
window.setTimeout(function () {
  var div = document.createElement('div');
  div.id = "my-transition-test";
  div.style.position = 'absolute';
  div.style.zIndex = -10;
  div.style.bottom = '-1000px';
  div.style.height = '100px';
  div.style.width = '100px';
  div.style.background = 'yellow';
  div.style.display = 'hidden';
  window.document.body.appendChild(div);

  $('#my-transition-test').one(_.values(transitionFinishedEvents).join(" "), function (e) {
    if ($M.transitionFinishedEvent !== e.type) {
      window.console.warn("Changing misconfigured Modernizr.transitionFinishedEvent to " + e.type + ". (Was " + $M.transitionFinishedEvent + ")");
      $M.transitionFinishedEvent = e.type;
    }
    window.document.body.removeChild(div);
  });

  window.setTimeout(function () {
    div.style[$M.prefixed('transition')] = '0.1s';
    div.style[$M.prefixed('transform')] = 'translate3d( 100px,0,0)';
  }, 25);

}, 25);

その後、すべてのプラットフォーム (CSS3 トランジションを含む) で動作する transitionEnd のイベント リスナーを簡単に設定できます。

$("#fooBar").on($M.transitionEnd, function() {
    // do something clever
}

コードは underscore.js と jQuery に依存していますが、簡単にバニラ jsに変換できます。

この影響を受ける人々のための関連リンク:

  1. [Modernizr] Android 4.1.1 (Samsung Note II) で、'transition' と 'transform' のプレフィックスのないバージョンが誤って返される
  2. [リーフレット] Android 4.1.1 + Samsung Galaxy Note II でフリーズ
于 2013-06-16T11:40:23.360 に答える