Question

说我有一个div

<div id='box'></div>

在javascript / jquery中，我去了：

$('#box').css('transform','translateX(300px)');
$('#box').css('-webkit-transform','translateX(300px)');

https://jsfiddle.net/foreyez/7fuL77h3/

现在我可以运行其中一个（或两个）句子，它将在桌面（Chrome）上运行。但在移动设备上，特别是iOS某些版本要求你有-webkit前缀。所以只有第二个才有用。

因此我通常在我的代码中包含这两个语句。它似乎工作。但是我想知道这是不是＆＃34;坏＆＃34;。因为它可能会尝试运行这两种转换，特别是如果它在桌面上。不是我注意到的，因为它似乎工作正常，因为你可以看到小提琴。但也许在幕后它是不好的魔力或什么的。

如果是这样更好的做法事先确定我是否应该使用＆＃34;转换＆＃34;或＆＃34; -webkit-transform＆＃34;并且只运行一个声明 - 如果是这样的话，我该如何确定？注意我在这里说javascript代码（不是css）。或者像我做的那样运行两者会更好吗？

Answer 1

你当然可以这样做

$('#box').css({
   'transform' : 'translateX(300px)',
   '-webkit-transform' : 'translateX(300px)'
});

Answer 2

根据jQuery docs，

从jQuery 1.8开始，.css（）setter将自动处理属性名称的前缀。例如，在Chrome / Safari中将.css（“user-select”，“none”）设置为-webkit-user-select，Firefox将使用-moz-user-select，IE10将使用-ms-user -select。

因此，请确保您使用1.8+并让jQuery为您处理该属性。

要回答实际问题，您应该很容易看到300px的翻译是否被应用了两次。它相当于600px的单个翻译

Answer 3

没关系。 Web浏览器认为前缀和非前缀样式相同。例如，Chrome transform的优先级高于-webkit-transform，webkit-transform将被忽略。然而，一个不知道transform是什么的浏览器会忽略它并使用-webkit-transform。（我发誓它总是Safari ......）

有点像color: red;后紧跟color: blue;。文字为蓝色，红色无关紧要。

Answer 4

您可以使用这两个语句，因为浏览器只会对元素进行一次转换。因此，如果浏览器进行第一次转换，它甚至不会尝试执行-webkit版本。这就是为什么如果你必须做歪斜并翻译它，你必须链接变换。

您可以在此处查看更多示例：Multiple CSS keyframe animations using transform property not working

如果我在常规语法中包含供应商前缀，那么变换是否会被应用两次？

4 个答案: