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 上仅显示一个弹出窗口，而从 4.1 开始，android 4.1 将出现 2 个弹出窗口，“transition”和“webkitTransition”均有效

4

1 回答 1

3

我有一个类似的问题，桌面上的 Chrome 和三星设备上的 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);

之后，您可以轻松地为 transitionEnd 设置一个事件侦听器，该侦听器将适用于所有平台（具有 CSS3 转换）：

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

该代码依赖 underscore.js 和 jQuery，但可以很容易地转换为vanilla js。

受此影响的人的相关链接：

  1. [Modernizr]Android 4.1.1 (Samsung Note II) 错误返回无前缀版本的“transition”和“transform”
  2. [传单] 在 Android 4.1.1 + 三星 Galaxy Note II 上冻结
于 2013-06-16T11:40:23.360 回答