javascript - 带有内联样式的 vendor 前缀

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)都忽略 vendor 前缀并返回以下内容？

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

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

fiddle here如果查看代码的作用有帮助。

Answer 1

多年来，没有浏览器需要transform 前缀。一旦不带前缀的 transform 发布，浏览器只需将其带前缀的属性实现为不带前缀的属性的别名，这意味着带前缀和不带前缀的声明将根据声明的顺序在级联中相互覆盖。此外，由于它们是别名，即使您删除显式的无前缀声明，它们仍将显示为无前缀。

这只是浏览器告诉您不要担心不需要它们的新版本中的前缀的方式。它们适用于尚不支持无前缀属性的旧版本。例如，唯一需要 -ms-transform 的 Internet Explorer 版本是 9。不需要前缀(用于转换和 many other features )的 Internet Explorer 10 于 2012 年问世。另请注意，某些浏览器(如 Firefox)在保留别名一段时间后会完全放弃对 really 旧前缀属性的支持 — 同样，这不是您必须担心的事情，因为您始终确保包括无前缀的声明(not everyone does)。