transform 兼容

2015-09-25 散崖 13256人已阅读

       说起transform 的浏览器兼容的问题,大家基本都是知道属性前面要加个浏览器的前缀之类,之前做基于微信的微官网时,就踩过手机浏览器的兼容很多的坑。就说国内大多数用户在手机移动端端的浏览器基本是微信、QQ、UC、百度浏览器、360、Safari、安卓自带浏览器(很少人用),而在PC端的浏览器则是Chrome、IE、QQ、360、FF。这些浏览器在处理transform的时候,到底哪些是需要加浏览器前缀,加怎样的前缀呢?自己花了一点时间整理了浏览器 transform 支持情况:

pic01

      注意:前缀属性的大小写,webkitTransform=WebkitTransform 其中W大小写是没关系的,但是T一定要大写! MozTransformM一定要写,msTransform属性中的ms一定要小写!否则浏览器将不识别!

      所以如果要让用户得到好的体验而保证浏览器不出现bug,我们最可靠的方式就是获取浏览器的前缀,然后通过前缀的方式来执行事件!那怎么得到浏览器的前缀!怎么获取呢?通过getVendorPrefix来获取:

function getVendorPrefix() {
	var body, i, style, transition, vendor;
	body = document.body || document.documentElement;
	style = body.style;
	transition = "transition";
	vendor = ["Moz", "Webkit", "Khtml", "O", "ms"];
	transition = transition.charAt(0).toUpperCase() + transition.substr(1);
	i = 0;
	while (i < vendor.length) {
		if (typeof style[vendor[i] + transition] === "string") {
		  return vendor[i];
		}
		i++;
	}
	return false;
}

执行的结果如下:

pic02

      相比pc端,移动端的浏览器明显都是webkit的天下,所以移动端基本可以毫无顾虑使用css3属性!所以我们可以简单的处理一下浏览器的兼容的问题:

//value可以是 translate|rotate|scale|matrix|perspective|skew
function setTransform(elem,value){
	elem.style[getVendorPrefix()+"Transform"]=value
}

      关于transform的兼容的介绍就到这里,这个时候你会想到那么transition的属性transitionProperty,transitionDuration,transitionTimingFunction的属性前缀的,还有animation 的属性animationName等…的前缀支持情况,自己分别拿了其中的一个属性进行了测试,结果如下:

      transitionDuration检测结果:

pic03

      animationName检测结果:

03

      现在各个浏览器对于animation和transition的属性支持基本了解,接下来就是要基于对于以上的理解,就要写统一的方案来实现各浏览器的兼容!当然在写方案之前,你还是需要对于animationend和transitionend的事件作进一步的了解

了解transtionend 与animationend  直接查看解决方案

 

交换友情链接