使用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是维护网址相当糟糕).

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

我已经将Simon Hausmann脚本中的部分文档添加到了他(尽管我稍微修改过它们).我还使用jQuery将click事件附加到我的按钮 - 所有其他脚本都是用本机JavaScript编写的.

我已经针对Chrome 18和Safari 5.1进行了测试,它似乎在两种浏览器中都能正常运行.

希望这可以帮助.

Answer 2

在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文档

Answer 3

对于在 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 的更多信息