CSS3动画和变换属性的Javascript代码

我知道，使用CSS时，我们必须为transform属性使用供应商前缀，例如-ms-、-moz-、-webkit-和-o-。 对于动画属性，只需-moz-、-webkit-和-o-。 我想知道如何从Javascript设置它们？以及过渡性质

在找这样的东西吗-

object.style.vendorTransform     // whole list
object.style.vendorAnimation     // whole list
object.style.vendorTransition    // whole list

提前谢谢

---

注意-我不需要任何插件，我需要纯Javascript代码。

是一个非常整洁的Javascript工具，您可以使用它来完成此操作。

当我正确理解您的问题时，您希望使用JS而不是CSS进行转换（在这种情况下，我建议使用compass框架的SASS）

您可以这样做，因此使用正确的前缀：

var sty = ele.style, transform, transforms = ["webkitTransform", "MozTransform", "msTransform", "OTransform", "transform"];
for (var i in transforms) {
    if (transforms[i] in sty) {
        transform = transforms[i];
        break;
    }
}

后来：

ele.style[transform] = "whatever transform you like to do";

---

因此，您不必对每个元素都进行设置，当然，您可以对其他元素重复使用“transform”变量，因此只需执行一次检查。

尝试以下操作：

// es6
function animate(element, transformValue = 'none', transitionValue = 'none') {
  const prefixes = ['webkit', 'moz', 'ms', 'o', '']

  if (element) {
    for (let value of prefixes) {    
      element.style[value + 'Transform'] = transformValue
      element.style[value + 'Transition'] = transitionValue
    }
  }
}

const el = document.getElementById('someId')
animate(el, 'translate3d(200px, 0, 0)', 'transform 400ms ease-out')

---

我对Less、Sass、compass等都没有经验。我也没有读过很多关于它们的书。我只是一个初学者。我只是想问一下如何使用javascript中的供应商前缀编写代码？我对字母大小写感到困惑，比如transform和moz前缀-object.style.MozTransform-是真的还是object.style.MozTransform是真的？？对于webkit、ms和o前缀也是如此。请注意，版本1.8中的jQuery会自动确定所需的供应商前缀。请看这个问题：我想要的是在JS中使用的所有具有正确大小写的供应商前缀的列表。就像我对设置object.msTransform还是object.msTransform感到困惑一样。。就这样。。在你的回答中，我发现了。。谢谢。代码示例的第三行必须是

if（sty中的transforms[i]）{

-检查值而不是索引。这让我笑了，但是所有支持ES6语法的浏览器，例如..of..循环，都支持这些CSS属性，没有供应商前缀；-）@kaido，babel和旧浏览器支持什么呢？