使用 javascript 变量设置 Webkit 关键帧值

Set Webkit Keyframes Values Using Javascript Variable

本文关键字：关键帧 Webkit 设置 javascript 变量 使用      更新时间：2023-09-26

>我有一段JS代码来生成随机数并将它们输出为变量，以在此处代替旋转值

@-webkit-keyframes rotate {
    0% {-webkit-transform: rotate(-10deg);}
    100% {-webkit-transform: rotate(10deg);}
}
#dog{
/*irrelevant settings*/
-webkit-animation: rotate 5s infinite alternate ease-in-out;
}

上面的代码工作正常，但是当我尝试将 javascript 中的变量粘贴到rotate(variable);时，我无法让它工作。我是新手，所以我 90% 确定我只是没有为变量提供正确的语法(说真的，我不擅长记住某些东西是否需要括号、引号、波浪线等，我已经尝试了我能想到的一切(。

或者可能是因为变量是函数的局部变量，CSS 无法读取它。

所以基本上我只需要一些好心的陌生人告诉我正确的语法以及如何让 CSS 读取变量(如果可能的话(。

否则，看起来我需要该函数来创建整个：

@-webkit-keyframes rotate {
    0% {-webkit-transform: rotate(-10deg);}
    100% {-webkit-transform: rotate(10deg);}
}

。这可能有点混乱，因为随机变量可能会应用于多个 CSS 元素。

哦，目前变量的格式设置为在数字后包含deg，因此这不是问题。事实上，为了方便起见，假设我使用的是 var dogValue = "20deg";并忘记随机元素。

谢谢。

好吧，不是你的实际代码是什么样子的，但你不能把 JavaScript 变量扔到 CSS 中，它不会识别它们。

相反，您需要通过JavaScript创建CSS规则，并将它们插入CSSOM(CSS对象模型(中。这可以通过几种方式完成 - 您可以只创建关键帧动画并将其添加，也可以覆盖现有动画。为了解决这个问题，我假设您希望使用不同的旋转值不断覆盖现有的关键帧动画。

我已经整理(并记录(了一个JSFiddle供您查看：http://jsfiddle.net/russelluresti/RHhBz/2/

它开始运行 -10 -> 10 度旋转动画，但随后您可以单击该按钮让它在随机值(-360 到 360 度之间(之间执行旋转。

这个例子主要是从西蒙·豪斯曼(Simon Hausmann(早期的实验中拼凑出来的。你可以在这里看到来源：http://www.gitorious.org/~simon/qtwebkit/simons-clone/blobs/ceaa977f87947290fa2d063861f90c820417827f/LayoutTests/animations/change-keyframes.html(只要该链接有效，gitorious 在维护 url 方面非常糟糕(。

我还从这里获取了randomFromTo JavaScript函数代码：http://www.admixweb.com/2010/08/24/javascript-tip-get-a-random-number-between-two-integers/

我已经在西蒙·豪斯曼脚本中从他那里获取的部分中添加了文档(尽管我稍微修改了它们(。我还使用 jQuery 将 click 事件附加到我的按钮上——所有其他脚本都是用原生 JavaScript 编写的。

我已经在Chrome 18和Safari 5.1上对此进行了测试，它似乎在两种浏览器中都可以正常工作。

希望这有帮助。

chrome 49及以后

Firefox 48，您可以利用新的Javascript API element.animate()来推送关键帧动画。

请注意，此 API 是实验性的，除上述内容外，无法跨浏览器工作。

可以使用添加class或注入关键帧等过时的解决方案来实现向后兼容性。没有立即提供相同的垫片。

拉动了 MDN 示例

document.getElementById("tunnel").animate([
  // keyframes
  { transform: 'translateY(0px)' }, 
  { transform: 'translateY(-300px)' }
], { 
  // timing options
  duration: 1000,
  iterations: Infinity
});

指：

  • caniuse.com/#feat=web-animation
  • MDN 文档

对于任何在2017年寻找这个答案的人来说，以下是RussellUresti答案的变化。

在他的示例中，这将不再起作用： 

keyframes.insertRule("0% { -webkit-transform: rotate(" + randomFromTo(-360,360) + "deg); }");
keyframes.insertRule("100% { -webkit-transform: rotate(" + randomFromTo(-360,360) + "deg); }");

这是由于 .insertRule(( 是一个非标准名称。它现在是 .appendRule((，所以 RusselsUresti 的代码现在是：

keyframes.appendRule("0% { -webkit-transform: rotate(" + randomFromTo(-360,360) + "deg); }");
keyframes.appendRule("100% { -webkit-transform: rotate(" + randomFromTo(-360,360) + "deg); }");

(只需将insertRule替换为appendRule。

有关 CSSKeyframeRule 的更多信息，请参见此处

相关文章：