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

Posted 2023-03-06

【中文标题】CSS3 动画和变换属性的 Javascript 代码

【英文标题】：Javascript code for CSS3 animation and transform property

【发布时间】：2015-08-20 20:38:49

【问题描述】：

我知道，对于 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 代码。

【问题讨论】：

我只是想问一下如何使用javascript中的供应商前缀编写代码？我对字母大小写感到困惑，例如变换和 moz 前缀 - object.style.MozTransform - 是真的 OR object.style.mozTransform 是真的吗？对于 webkit、ms 和 o 前缀也是如此。

请注意，jQuery 1.8 版会自动确定所需的供应商前缀。看到这个问题：***.com/questions/17487716/…

【参考方案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”变量，所以只需要检查一次。

【讨论】：

我想要的是在 JS 中使用正确大小写的所有供应商前缀列表。就像我很困惑是否设置 object.msTransform 或 object.MsTransform .. 就是这样.. 在你的回答中我找到了那些.. 谢谢。

代码示例的第三行必须是 if (transforms[i] in sty) — 检查值而不是索引。

【参考方案2】：

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

【讨论】：

我没有使用 Less、Sass、指南针等的经验。我也没有读过太多关于它们的文章。我只是一个初学者。

【参考方案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')

【讨论】：

让我笑了，但是所有支持 ES6 语法和例如 for..of.. 循环的浏览器都支持这些没有供应商前缀的 CSS 属性 ;-)

@Kaiido，babel 和老浏览器支持呢？