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

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" 它会按预期工作。

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

Answer 1

是的，正如 Modernizr docs 指出的那样：

Return values will also be the camelCase variant, if you need to translate that to hyphenated style use:

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 和转换

Correct use of Modernizr.prefixed with transition and transform on Safari

javascript

css

safari

jquery

modernizr