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

IT技术 javascript css variables webkit keyframe
2021-02-03 19:34:00

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

谢谢。

3个回答

好吧，不是你实际代码的样子，但你不能把 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（只要该链接有效在维护网址方面非常糟糕）。

我还从这里获取了 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 上测试过这个，它似乎在两种浏览器中都能正常工作。

希望这可以帮助。

从 chrome 45 开始，jsfiddle 不再起作用。这是一个修复。jsfiddle.net/RandallFlagg/7yx4zpq0这就是为什么：developer.mozilla.org/en/docs/Web/API/CSSKeyframesRule
2021-03-16 19:34:00
在 Chrome 65 中，如果您将 insertRule 更改为 appendRule，并将 window.CSSRule.WEBKIT_KEYFRAMES_RULE 更改为 window.CSSRule.KEYFRAMES_RULE，则该小提琴会起作用
2021-04-12 19:34:00

在chrome 49开始和Firefox 48以后，您可以利用新的JavaScript APIelement.animate()在关键帧动画来推动。

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

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

删除 MDN 示例

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

参考：

这应该是公认的答案。即使您希望元素从另一个位置开始并返回到原始位置，它也能工作。我见过的其他解决方案 CSSOM，如果您希望元素从其他位置开始，则 CSS DOM 不起作用。元素必须移动到位置，这不是像这样的解决方案。它甚至使用最少的代码，它应该像 css 一样！
2021-03-20 19:34:00
这是一个凌乱的沙箱，但它可以工作……使用 JS 和动画侦听器在动画的每次迭代中为“100%”关键帧分配随机值。 codepen.io/ashleedawg/pen/qBBKKeg
2021-03-31 19:34:00

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

其它你可能感兴趣的问题
上一篇验证外部脚本已加载 下一篇如何使jquery“$.post”请求同步