使用 Javascript 变量设置 Webkit 关键帧值 [英] Set Webkit Keyframes Values Using Javascript Variable

问题描述

我有一段 JS 代码来生成随机数并将它们作为变量输出，在这里用来代替旋转值

I have a piece of JS code to generate random numbers and output them as variables to be used here in place of the rotation values

@-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% 确定我只是没有为变量找到正确的语法(说真的，我很难记住是否需要括号、引号、波浪线等，我已经尝试了所有我能想到的).

The code above works fine however when I try to stick the variables from the javascript into rotate(variable); I cannot get it to work. I am new to this so I'm 90% sure I just haven't got the syntax right for the variable (seriously I am terrible at remembering if something needs brackets, quotes, squigglys etc and I have tried all I can think of).

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

Or it might be because the variable is local to the function and CSS cannot read that.

所以基本上我只需要一些好心的陌生人告诉我正确的语法以及如何让 CSS 在可能的情况下读取变量.

So basically I just need some kind stranger to tell me the correct syntax and how to get CSS to read the variable if possible.

否则看起来我将需要该函数来创建整个:

Otherwise it looks like I will need the function to create the entirety of:

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

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

...which might be a bit messy since the random variable will likely be applied to multiple css elements.

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

Oh and currently the variable is formatted to include the deg after the number so that is not the issue. In fact, for the sake of ease just assume I am using var dogValue = "20deg"; and forget the random element.

谢谢.

推荐答案

好吧，不是你实际代码的样子，但你不能把 JavaScript 变量扔进 CSS，它不会识别它们.

Okay, not what your actual code looks like, but you can't throw JavaScript variables into CSS, it won't recognize them.

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

Instead, you need to create the CSS rules through JavaScript and insert them into the CSSOM (CSS Object Model). This can be done a few ways -- you can either just create a keyframe animation and add it in, or you can overwrite an existing animation. For this sake of this question, I'm going to assume you want to continually overwrite an existing keyframe animation with different rotation values.

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

I've put together (and documented) a JSFiddle for you to take a look at: http://jsfiddle.net/russelluresti/RHhBz/2/

它开始运行 -10 -> 10 度旋转动画，但随后您可以单击按钮使其在随机值之间(-360 度和 360 度之间)执行旋转.

It starts off running a -10 -> 10 degree rotation animation, but then you can click the button to have it execute a rotation between random values (between -360 and 360 degrees).

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

This example was hacked together primarily from earlier experimentation done by Simon Hausmann. You can see the source here: http://www.gitorious.org/~simon/qtwebkit/simons-clone/blobs/ceaa977f87947290fa2d063861f90c820417827f/LayoutTests/animations/change-keyframes.html (for as long as that link works, gitorious is pretty bad at maintaining urls).

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

I've also taken the randomFromTo JavaScript function code from here: http://www.admixweb.com/2010/08/24/javascript-tip-get-a-random-number-between-two-integers/

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

I've added documentation to the parts of the Simon Hausmann script that I've taken from him (though I've slightly modified them). I've also used jQuery just to attach the click event to my button--all other script is written in native JavaScript.

我已经在 Chrome 18 和 Safari 5.1 上测试过这个，它似乎在两种浏览器中都能正常工作.

I've tested this for Chrome 18 and Safari 5.1, and it seems to work fine in both browsers.

希望这会有所帮助.

这篇关于使用 Javascript 变量设置 Webkit 关键帧值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！