Android 4.1 change-transition和WebKittTransition defiend，如何正确确定transition end事件的名称？

我注意到，随着安卓4.0升级到4.1，股票浏览器&webView中的css转换前缀发生了变化

基本上，“过渡”和“webkitTrantion”都是污点

前缀为“transition”的modernizer返回android 4.0上的webkitTrantion modernizer.前缀（“transition”）返回android 4.1上的转换

但是，对于转换结束事件名称，“transitionend”事件未定义/不起作用。您仍然需要使用webkit特定的“WebKittTransitionEnd”事件名称

问题：我找不到任何关于此更改的文档，因此不确定如何继续。。。有人能解释一下吗？任何对文档的建议或链接都将不胜感激

复制：

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上显示一个弹出窗口，在android 4.1上显示两个弹出窗口，因为在4.1上，“transition”和“WebKittTransition”都是有效的

我遇到了一个类似的问题，桌面上的Chrome和三星设备上的android会报告另一个事件名称，而不是他们实际使用的名称。我能想到的唯一方法是通过触发一个事件，设置几个不同的事件监听器，然后查看哪个事件被触发，从而找到他们实际使用的内容。下面的代码（from）基本上就是这样做的，并将Modernizr.transitionEnd设置为该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);

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

该代码依赖于underline.js和jQuery，但可以轻松地转换为

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

---

看看我的答案：）回答。请反馈。您的代码返回“未定义”我是否做错了什么？我的代码中没有返回任何内容的函数。具体一点，我指的是带有$M.transitionFinishedEvent的控制台警告。我得到的不是$M.transitionFinishedEvent，而是'undefined'。嗯。。不确定。我必须调查一下。你也可以用调试器来做。只需检查事件对象。

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