Android 4.1 change - transition and webkittransition defiend, how to properly determine name of transition end event?

问题

I have noticed that with the update from android 4.0 to 4.1, there is a change as to css transition prefix in the stock browser & webView

Basically, both "transition" and "webkitTrantion" are defiend.

Modernizr.prefixed("transition") returns webkitTrantion on android 4.0 Modernizr.prefixed("transition") returns trantion on android 4.1

However, as to transition end event name, "transitionend" event is not defined / does not work. you still need to use the webkit specific "webkitTransitionEnd" event name

QUESTION: I cannot find any documentation on this change, and thus are not certain how to proceed... can anyone shed some light on this? any suggestions or links to docs woudl be greatly appreciated!

TO REPRODUCE:

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]);
        }
    }
}

The code above, will result in just one popup showing up on android 4.0, and 2 popups for android 4.1 since on 4.1, both "transition" and "webkitTransition" as valid

回答1:

I had a similar problem where Chrome on desktop and Android on Samsung devices would report another event name than what they actually used. The only way I can think of that would find what they are actually using is by triggering an event, set up several different event listeners, and see which one was triggered. The code below (from this gist) essentially does this and sets Modernizr.transitionEnd to be that eventname.

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

Afterwards you can easily set up an event listener for transitionEnd that will work on all platforms (that has CSS3 transitions):

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

The code has dependencies on underscore.js and jQuery, but can easily be turned into vanilla js.

Relevant links for people affected by this:

[Modernizr]Unprefixed version of 'transition' and 'transform' incorrectly returned for Android 4.1.1 (Samsung Note II)
[Leaflet] Freeze on Android 4.1.1 + Samsung Galaxy Note II

来源：https://stackoverflow.com/questions/13823188/android-4-1-change-transition-and-webkittransition-defiend-how-to-properly-de

标签

android

css-transitions