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