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

问题描述

我有一段JS代码生成随机数，并将其作为变量输出，以代替旋转值。

  @  -  webkit-keyframes rotate {
 0％{-webkit-transform：rotate（-10deg）;} 
 100％{-webkit-transform：rotate（10deg）;} 
} 
 
 #dog {
 / *不相关的设置* / 
 -webkit-animation：rotate 5s无限替换缓入; 
} 
  

上面的代码可以正常工作，但是当我试图把变量从javascript into 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，它不会认出他们。

相反，你需要创建CSS规则通过JavaScript并将其插入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在维护网址时就相当糟糕）。

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

我已经在Simon Hausmann的脚本中添加了文档， ）。我还使用jQuery只是将点击事件附加到我的按钮 - 所有其他脚本是用原生JavaScript编写的。

我测试了这个Chrome 18和

希望这有助于。

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;
}

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).

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

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);}
}

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

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.

Thanks.

解决方案

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

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.

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

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).

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).

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/

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.

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

Hope this helps.

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