2023年6月21日发(作者：)
transform兼容说起transform 的浏览器兼容的问题,⼤家基本都是知道属性前⾯要加个浏览器的前缀之类，之前做基于微信的微官⽹时，就踩过⼿机浏览器的兼容很多的坑。就说国内⼤多数⽤户在⼿机移动端端的浏览器基本是微信、QQ、UC、百度浏览器、360、Safari、安卓⾃带浏览器（很少⼈⽤），⽽在PC端的浏览器则是Chrome、IE、QQ、360、FF。这些浏览器在处理transform的时候，到底哪些是需要加浏览器前缀，加怎样的前缀呢？⾃⼰花了⼀点时间整理了浏览器 transform ⽀持情况：注意：前缀属性的⼤⼩写，webkitTransform=WebkitTransform 其中W⼤⼩写是没关系的，但是T⼀定要⼤写! MozTransform中M⼀定要写，msTransform属性中的ms⼀定要⼩写！否则浏览器将不识别！ 所以如果要让⽤户得到好的体验⽽保证浏览器不出现bug，我们最可靠的⽅式就是获取浏览器的前缀，然后通过前缀的⽅式来执⾏事件！那怎么得到浏览器的前缀!怎么获取呢？通过getVendorPrefix来获取：12function
getVendorPrefix() {3 var
body, i, style, transition, vendor;4 body = || ntElement;5 style = ; transition = "transition";6 vendor = ["Moz", "Webkit", "Khtml", "O", "ms"];7 transition = (0).toUpperCase() + (1);8 i = 0;9 while
(i < ) {10 if
(typeof
style[vendor[i] + transition] === "string") {11 return
vendor[i];12 } i++;13 }14 return
false;15}16执⾏的结果如下： 相⽐pc端，移动端的浏览器明显都是webkit的天下，所以移动端基本可以毫⽆顾虑使⽤css3属性！所以我们可以简单的处理⼀下浏览器的兼容的问题：1//value可以是 translate|rotate|scale|matrix|perspective|skew2function
setTransform(elem,value){3 [getVendorPrefix()+"Transform"]=value4} 关于transform的兼容的介绍就到这⾥，这个时候你会想到那么transition的属性transitionProperty,transitionDuration,transitionTimingFunction的属性前缀的，还有animation 的属性animationName等…的前缀⽀持情况,⾃⼰分别拿了其中的⼀个属性进⾏了测试，结果如下： transitionDuration检测结果： animationName检测结果： 现在各个浏览器对于animation和transition的属性⽀持基本了解，接下来就是要基于对于以上的理解，就要写统⼀的⽅案来实现各浏览器的兼容！当然在写⽅案之前，你还是需要对于animationend和transitionend的事件作进⼀步的了解
2023年6月21日发(作者：)
transform兼容说起transform 的浏览器兼容的问题,⼤家基本都是知道属性前⾯要加个浏览器的前缀之类，之前做基于微信的微官⽹时，就踩过⼿机浏览器的兼容很多的坑。就说国内⼤多数⽤户在⼿机移动端端的浏览器基本是微信、QQ、UC、百度浏览器、360、Safari、安卓⾃带浏览器（很少⼈⽤），⽽在PC端的浏览器则是Chrome、IE、QQ、360、FF。这些浏览器在处理transform的时候，到底哪些是需要加浏览器前缀，加怎样的前缀呢？⾃⼰花了⼀点时间整理了浏览器 transform ⽀持情况：注意：前缀属性的⼤⼩写，webkitTransform=WebkitTransform 其中W⼤⼩写是没关系的，但是T⼀定要⼤写! MozTransform中M⼀定要写，msTransform属性中的ms⼀定要⼩写！否则浏览器将不识别！ 所以如果要让⽤户得到好的体验⽽保证浏览器不出现bug，我们最可靠的⽅式就是获取浏览器的前缀，然后通过前缀的⽅式来执⾏事件！那怎么得到浏览器的前缀!怎么获取呢？通过getVendorPrefix来获取：12function
getVendorPrefix() {3 var
body, i, style, transition, vendor;4 body = || ntElement;5 style = ; transition = "transition";6 vendor = ["Moz", "Webkit", "Khtml", "O", "ms"];7 transition = (0).toUpperCase() + (1);8 i = 0;9 while
(i < ) {10 if
(typeof
style[vendor[i] + transition] === "string") {11 return
vendor[i];12 } i++;13 }14 return
false;15}16执⾏的结果如下： 相⽐pc端，移动端的浏览器明显都是webkit的天下，所以移动端基本可以毫⽆顾虑使⽤css3属性！所以我们可以简单的处理⼀下浏览器的兼容的问题：1//value可以是 translate|rotate|scale|matrix|perspective|skew2function
setTransform(elem,value){3 [getVendorPrefix()+"Transform"]=value4} 关于transform的兼容的介绍就到这⾥，这个时候你会想到那么transition的属性transitionProperty,transitionDuration,transitionTimingFunction的属性前缀的，还有animation 的属性animationName等…的前缀⽀持情况,⾃⼰分别拿了其中的⼀个属性进⾏了测试，结果如下： transitionDuration检测结果： animationName检测结果： 现在各个浏览器对于animation和transition的属性⽀持基本了解，接下来就是要基于对于以上的理解，就要写统⼀的⽅案来实现各浏览器的兼容！当然在写⽅案之前，你还是需要对于animationend和transitionend的事件作进⼀步的了解
发布评论