Android   发布时间:2022-04-28  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了Android 4.1更改 – 转换和webkittransition defiend,如何正确确定转换结束事件的名称?大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
我注意到随着从 android 4.0到4.1的更新,库存浏览器中的css转换前缀发生了变化. web视图

基本上,“过渡”和“webkitTrantion”都是不确定的.

@H_713_5@modernizr.prefixed(“transition”)在Android 4.0上返回webkitTrantion@H_15_9@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”都有效

解决方法

我遇到了类似的问题,桌面上的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)';
  },25);

},25);

之后,您可以轻松地为transitionend设置一个事件监听器,该监听器可以在所有平台上运行(具有CSS3转换):

$("#fooBar").on($m.transitionend,function() {
    // do something cLever
}

代码依赖于underscore.js和jQuery,但很容易变成vanilla js.

受此影响的人的相关链接

> [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

大佬总结

以上是大佬教程为你收集整理的Android 4.1更改 – 转换和webkittransition defiend,如何正确确定转换结束事件的名称?全部内容,希望文章能够帮你解决Android 4.1更改 – 转换和webkittransition defiend,如何正确确定转换结束事件的名称?所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。