Android 4.1 cambio – transición y webkittransition defiend, cómo determinar correctamente el nombre del evento final de transición?

He notado que con la actualización de Android 4.0 a 4.1, hay un cambio en cuanto a css prefijo de transición en el navegador de valores y webView

Básicamente, ambos "transición" y "webkitTrantion" son defiend.

Modernizr.prefixed ("transition") devuelve webkitTrantion en android 4.0 Modernizr.prefixed ("transition") devuelve trantion en android 4.1

Sin embargo, en cuanto al nombre del evento final de transición, el evento "transitionend" no está definido / no funciona. Todavía necesitas usar el nombre específico del evento webkitTransitionEnd

PREGUNTA: No puedo encontrar ninguna documentación sobre este cambio, y por lo tanto no estoy seguro de cómo proceder … alguien puede arrojar algo de luz sobre esto? ¡Cualquier sugerencia o acoplamiento a los docs woudl sea apreciado grandemente!

REPRODUCIR:

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

El código anterior, resultará en un solo popup apareciendo en android 4.0 y 2 popups para android 4.1 ya que en 4.1, tanto "transition" y "webkitTransition" como válido

Tuve un problema similar en el que Chrome en el escritorio y Android en los dispositivos Samsung reportarían otro nombre de evento que lo que realmente utilizaban. La única manera en que puedo pensar en que encontraría lo que realmente están utilizando es mediante el desencadenamiento de un evento, configurar varios oyentes de eventos diferentes, y ver cuál fue activado. El código abajo (de este esencial ) hace esencialmente esto y fija Modernizr.transitionEnd para ser ese nombre del acontecimiento.

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

Posteriormente puede configurar fácilmente un detector de eventos para transitionEnd que funcionará en todas las plataformas (que tiene transiciones CSS3):

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

El código tiene dependencias de underscore.js y jQuery, pero puede convertirse fácilmente en js de vainilla .

Enlaces relevantes para las personas afectadas por esto:

  1. [Modernizr] La versión sin pretensión de 'transition' y 'transformation' devolvió incorrectamente para Android 4.1.1 (Samsung Note II)
  2. [Folleto] Congelar en Android 4.1.1 + Samsung Galaxy Note II
FlipAndroid es un fan de Google para Android, Todo sobre Android Phones, Android Wear, Android Dev y Aplicaciones para Android Aplicaciones.