...非常痛苦。
var transform = 'translate3d(0,0,0)';
elem.style.webkitTransform = transform;
elem.style.mozTransform = transform;
elem.style.msTransform = transform;
elem.style.oTransform = transform;
有没有库/框架/更好的方法来做这件事?最好只用一行JS代码实现。
...非常痛苦。
var transform = 'translate3d(0,0,0)';
elem.style.webkitTransform = transform;
elem.style.mozTransform = transform;
elem.style.msTransform = transform;
elem.style.oTransform = transform;
有没有库/框架/更好的方法来做这件事?最好只用一行JS代码实现。
我不知道有任何库可以做到这一点,但如果它们只是前缀 - 也就是说,名称或语法没有区别 - 那么自己编写函数将是微不足道的。
function setVendor(element, property, value) {
element.style["webkit" + property] = value;
element.style["moz" + property] = value;
element.style["ms" + property] = value;
element.style["o" + property] = value;
}
在大多数情况下,您可以直接使用这个。
现在是2015年末,情况略有变化。首先,McBrainy上面提到的大写问题很重要。webkit
前缀现在改为Webkit
,但幸运的是目前只有Safari使用。Chrome和Firefox现在支持不带前缀的el.style.transform
,我想IE也是这样。以下是一种稍微现代化一点的解决方案,它首先检查我们是否需要添加前缀:
var transformProp = (function(){
var testEl = document.createElement('div');
if(testEl.style.transform == null) {
var vendors = ['Webkit', 'Moz', 'ms'];
for(var vendor in vendors) {
if(testEl.style[ vendors[vendor] + 'Transform' ] !== undefined) {
return vendors[vendor] + 'Transform';
}
}
}
return 'transform';
})();
之后,我们只需使用一个简单的一行代码调用来更新元素上的transform
属性:
myElement.style[transformProp] = 'translate3d(0,' + dynamicY + 'px,0)';
var prefix = (function () {
var styles = window.getComputedStyle(document.documentElement, ''),
pre = (Array.prototype.slice
.call(styles)
.join('')
.match(/-(moz|webkit|ms)-/) || (styles.OLink === '' && ['', 'o'])
)[1],
dom = ('WebKit|Moz|MS|O').match(new RegExp('(' + pre + ')', 'i'))[1];
return {
dom: dom,
lowercase: pre,
css: '-' + pre + '-',
js: pre[0].toUpperCase() + pre.substr(1)
};
})();
Transform
而不是transform
),我通过艰难的方式发现了这一点... - Brian McCutchon