在做前端开发时，经常要在css3的属性前加上各浏览器厂商的前缀：
- 如果是在css中，编辑器自带的功能一般可以实现，或者通过gulp、webpack打包时也都有插件实现自动添加
- 如果是在js中，可以用下面的代码：封装成一个
prefixStyle()函数复用
//dom.js文件
let elementStyle = document.createElement('div').style
function vendor(prop) {
let ucProp = prop.charAt(0).toUpperCase() + prop.substr(1)
let transformNames = {
webkit: `webkit${ucProp}`,
Moz: `Moz${ucProp}`,
O: `O${ucProp}`,
ms: `ms${ucProp}`,
standard: prop
}
for (let key in transformNames) {
if (elementStyle[transformNames[key]] !== undefined) {
return key
}
}
return false
}
export function prefixStyle(style) {
const ret = vendor(style)
if (ret === false) {
return false
}
if (ret === 'standard') {
return style
}
return ret + style.charAt(0).toUpperCase() + style.substr(1)
}
然后，在页面中调用，如下：
import {prefixStyle} from 'common/js/dom.js'
const transform = prefixStyle('transform')
const transition = prefixStyle('transition')
el.style[transform] = 'translate3d(0, 0, 0)' //这里的 el 根据实际情况替换成DOM节点
el.style[transition] = 'all 0.4s ease'
还有另外一种封装方式，原理相同，只是根据使用场景不同，自己区分用哪个吧！
就不在这里废话了，贴个链接
http://blog.163.com/mity_rui@126/blog/static/109813618201542724555/
最后简单看下原理
这么一坨代码，其实分析一下，最重要的应该是第一句了
let elementStyle = document.createElement('div').style
在浏览器中打印下看看（我只看了火狐和谷歌，其他浏览器下，有兴趣的自己试试）
火狐浏览器下
谷歌浏览器下
结果已经很明显了！
当你单独测试一下具体的属性值，例如“transform”。如果没有你想要的属性，浏览器会返回undefined，如果有，会返回一个空的String字符串。
剩下的工作就是让我们的程序来识别这些特征了。
