Question

我注意到随着从android 4.0到4.1的更新，库存浏览器中的css转换前缀发生了变化。 webView的

基本上，“过渡”和“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”都是有效的

Answer 1

我遇到了类似的问题，桌面上的Chrome和三星设备上的Android会报告另一个事件名称而不是实际使用的名称。我能想到的唯一方法是找到他们实际使用的是触发事件，设置几个不同的事件监听器，并查看触发了哪一个。下面的代码（来自this 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。

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

Android 4.1更改 - 转换和webkit转换定义，如何正确确定转换结束事件的名称？

1 个答案: