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

Question

我有一段 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";忘记随机元素。

谢谢。

Answer 1

好吧，不是您实际代码的样子，但是您不能将 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/

我已将文档添加到我从他那里获取的 Simon Hausmann 脚本的部分(尽管我对它们进行了轻微修改)。我还使用 jQuery 将点击事件附加到我的按钮——所有其他脚本都是用原生 JavaScript 编写的。

我已经在 Chrome 18 和 Safari 5.1 上对此进行了测试，它似乎在这两种浏览器中都运行良好。

希望这对您有所帮助。