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

Question

我知道，对于 CSS，我们必须使用 vendor 前缀，例如 -ms-、-moz-、-webkit- 和 -o- 来表示转换属性。 对于动画属性，只需 -moz-、-webkit- 和 -o-。 我想知道如何从 Javascript 中设置它们？还有过渡属性。

正在寻找类似的东西 -

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

提前致谢。

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

Answer 1

当我正确理解你的问题时，你想在 JS 中进行转换，而不是 CSS(在这种情况下，我建议使用带有指南针框架的 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”变量，所以检查只需要完成一次。