javascript - 在 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