Javascript CSS3 动画和转换代码属性

Question

我知道，对于 CSS，我们必须使用供应商前缀，例如 -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

Less 是一个非常简洁的 JavaScript 工具，您可以使用它来执行此操作。

Answer 2

当我正确理解你的问题时，你想在 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”变量，所以检查只需要做一次。

Answer 3

尝试这样的事情：

// 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')

Javascript CSS3 动画和转换代码属性

Javascript code for CSS3 animation and transform property

javascript

css

animation

transform

vendor-prefix

Javascript CSS3 动画和转换代码 属性

Javascript code for CSS3 animation and transform property

javascript

css

animation

transform

vendor-prefix

Javascript CSS3 动画和转换代码属性