transform 兼容

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

      注意：前缀属性的大小写，webkitTransform=WebkitTransform 其中W大小写是没关系的，但是T一定要大写! MozTransform中M一定要写，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;
}

执行的结果如下：

      相比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检测结果：

      animationName检测结果：

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

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