Question

我有一个动画在页面上激活元素的功能。它为此元素添加了内联样式。在最简单的情况下，它会添加：

<div style="transition: transform 0.5s; transform: translateX(100px);">...</div>

但是我想添加对旧版浏览器的支持，所以我使用Modernizer.prefixed来查找属性的正确前缀，但现在我遇到了Safari的问题。

我尝试使用此代码：

var cssTransformProperty = Modernizr.prefixed("transform");
var cssTransitionProperty = Modernizr.prefixed("transition");
$myElement
    .css(cssTransitionProperty, cssTransformProperty + " 0.5s")
    .css(cssTransformProperty, "translateX(" + margin + "px)");

但是在safari上它试图添加这样的东西：

.css("transition", "WebkitTransform 0.5s")
.css("WebkitTransform", "translateX(100px)")

问题在于："WebkitTransform 0.5s" - Safari不理解这一行。如果我将其手动更改为"-webkit-transform 0.5s"，则按预期工作。

有没有办法告诉前缀使用这种css格式而不是js one？

Answer 1

是的，你可以，Modernizr docs指出：

返回值也将是camelCase变体，如果您需要将其转换为带连字符的样式使用：

str.replace(/([A-Z])/g, function(str,m1){ return '-' + m1.toLowerCase(); }).replace(/^ms-/,'-ms-');

示例：

var str = Modernizr.prefixed('WebkitTransform'); 
str = str.replace(/([A-Z])/g, function(str,m1){ return '-' + m1.toLowerCase(); }).replace(/^ms-/,'-ms-'); 
alert(str); //-webkit-transform

在Safari上正确使用Modernizr.prefixed转换和转换

1 个答案: