Question

我需要使用jQuery动态设置元素位置的动画。我有一些外部css负责所有事情css，然后我的脚本添加transform内联样式。

HTML：

<div></div>

的CSS：

div {
  width: 100px;
  height: 100px;
  background: pink;
  transition: all 1s ease;
}

JS：

$(function() {
  setTimeout(function() {
    $('div').css({
      '-webkit-transform' : 'translateY(100%)',
      '-ms-transform' : 'translateY(100%)',
      'transform' : 'translateY(100%)',
    });
  }, 1000);
});

我的问题是为什么我正在测试的所有浏览器（Safari 11.0.2，Firefox 56.0，Chrome 63.0.3239.84）都忽略了供应商前缀并返回以下内容？

<div style="transform: translateY(100%);"></div>

我显然希望尽可能多地支持浏览器......

如果看到代码的作用有帮助，请提示here。

Answer 1

多年来，没有浏览器需要transform的前缀。一旦发送了未加前缀的transform，浏览器就会将其前缀属性实现为未加前缀的属性的别名，这意味着前缀和未加前缀的声明将在级联中相互覆盖，具体取决于声明的顺序。此外，由于它们是别名，即使您删除明确的无前缀声明，它们仍会显示为无前缀。

这只是浏览器＆＃39;告诉你不要担心新版本中不需要它们的前缀的方式。它们适用于尚不支持无前缀属性的旧版本。例如，唯一需要-ms-transform的Internet Explorer版本是9. Internet Explorer 10，它不需要前缀（用于转换和many other features），于2012年推出。另请注意一些浏览器，比如Firefox，已知在将它们保持混淆一段时间之后完全放弃对真正的旧前缀属性的支持 - 再次，不是你必须担心的事情，因为你总是确保包括未加前缀的声明（not everyone does）。

供应商使用内联样式添加前缀

1 个答案: