以编程方式更改animation规则中的webkit转换值

我有这个样式表:

@-webkit-keyframes run { 0% { -webkit-transform: translate3d(0px,0px,0px); } 100% { -webkit-transform: translate3d(0px,1620px,0px); } } 

不是我想修改1620px的值取决于一些参数。 喜欢这个:

  @-webkit-keyframes run { 0% { -webkit-transform: translate3d(0px,0px,0px); } 100% { -webkit-transform: translate3d(0px, height*i, 0px); } } 

我宁愿能够使用JavaScript和jQuery,虽然一个纯CSS的解决scheme可以。

这是一个运行在它的移动Safari浏览器的iPhone游戏。

使用CSSOM

 var style = document.documentElement.appendChild(document.createElement("style")), rule = " run {\ 0% {\ -webkit-transform: translate3d(0, 0, 0); }\ transform: translate3d(0, 0, 0); }\ }\ 100% {\ -webkit-transform: translate3d(0, " + your_value_here + "px, 0);\ transform: translate3d(0, " + your_value_here + "px, 0);\ }\ }"; if (CSSRule.KEYFRAMES_RULE) { // W3C style.sheet.insertRule("@keyframes" + rule, 0); } else if (CSSRule.WEBKIT_KEYFRAMES_RULE) { // WebKit style.sheet.insertRule("@-webkit-keyframes" + rule, 0); } 

如果您想修改已包含的样式表中的关键帧规则,请执行以下操作:

 var stylesheet = document.styleSheets[0] // replace 0 with the number of the stylesheet that you want to modify , rules = stylesheet.rules , i = rules.length , keyframes , keyframe ; while (i--) { keyframes = rules.item(i); if ( ( keyframes.type === keyframes.KEYFRAMES_RULE || keyframes.type === keyframes.WEBKIT_KEYFRAMES_RULE ) && keyframes.name === "run" ) { rules = keyframes.cssRules; i = rules.length; while (i--) { keyframe = rules.item(i); if ( ( keyframe.type === keyframe.KEYFRAME_RULE || keyframe.type === keyframe.WEBKIT_KEYFRAME_RULE ) && keyframe.keyText === "100%" ) { keyframe.style.webkitTransform = keyframe.style.transform = "translate3d(0, " + your_value_here + "px, 0)"; break; } } break; } } 

如果您不知道顺序,但知道CSS文件的URL,请用document.querySelector("link[href=' your-css-url.css ']").sheetreplacedocument.styleSheets[0]

你有没有尝试过在你的HTML文档头部的<style>元素中声明你的CSS的关键帧部分。 然后你可以给这个元素一个id或者任何东西,随时用javaScript来改变它的内容。 像这样的东西:

 <style id="keyframes"> @-webkit-keyframes run { 0% { -webkit-transform: translate3d(0px,0px,0px); } 100% { -webkit-transform: translate3d(0px, 1620px, 0px); } } </style> 

然后你的jQuery可以改变这一切正常:

 $('#keyframes').text('whatever new values you want in here'); 

那么从你的例子看来,CSSanimation可能是矫枉过正的。 改用转换:

 -webkit-transition: -webkit-transform .4s linear; /* you could also use 'all' instead of '-webkit-transform' */ 

然后通过js对元素应用一个新的变换:

 $("<yournode>")[0].webkitTransform = "translate3d(0px,"+ (height*i) +"px,0px)"; 

它应该animation。

我没有得到你想修改这些值(即使用variables),但这里是3到4个解决scheme和1个不可能的解决scheme(现在)。

  • 服务器端计算 :为了不时地服务于不同的CSS,可以告诉PHP或任何服务器端语言来parsing.css文件以及.php.html ,然后在PHP标签之间使用PHPvariables。 当心文件caching:为了避免它,你可以加载样式表像style.css?1234567890随机或时间它会产生一个明显不同的文件,因此将不会被caching

  • SASS也是一个需要Ruby的服务器端解决scheme,它将为您提供一个现有的语法,可能比其他人已经提出的关于问题和解决scheme的手工解决scheme更清晰

  • LESS是一个客户端解决scheme,它将加载你的.less文件和一个less.js文件,它将parsing前者,并在你的服务器中为你提供variables。 它也可以使用node.js在服务器端工作

  • 显示页面时,CSS是否被dynamic修改
    对于2D来说,有Ben Barnett提供的jquery-animate-enhanced , 2d-transform或者CSS3 rotate是相反的(他们使用CSS3,尽可能使用CSS3,没有这样的function,他们使用现有的jQuery .animate()和IEmatrixfilter),但就是这样。
    您可以为jQuery创build一个插件 ,它将用几个参数来pipe理您想要通过3D转换实现的function,并避免修改DOM中冗长而复杂的CSS规则的麻烦

  • 只有CSS :你可以使用-moz-calc [ 1 ] [ 2 ],它只在Firefox 4.0中起作用,而-webkit-transform只能用于… OK不要:-)

尝试这样的事情:

 var height = {无论您想要检测的高度设置};
 element.style.webkitTransform =“translate3d(0px,”+ height * i +“,0px)”;

一个“矮胖”的解决scheme?

根据您select的粒度创build高度变换,例如0-99,100-199,200-299等。每个variables都有一个唯一的animation名称标识符,如:

 @-webkit-keyframes run100 { 0% { -webkit-transform: translate3d(0px,0px,0px); } 100% { -webkit-transform: translate3d(0px,100px,0px); } } @-webkit-keyframes run200 { 0% { -webkit-transform: translate3d(0px,0px,0px); } 100% { -webkit-transform: translate3d(0px,200px,0px); } } 

然后创build匹配的CSS类:

 .height-100 div { -webkit-animation-name: run100; } .height-200 div { -webkit-animation-name: run200; } 

然后用javascript决定你所在的块,并将相应的类分配给周围的元素。

 $('#frame').attr('class', '').addClass('height-100'); 

可能没关系,如果粒度不太好!

我用warmanp的解决scheme,它的工作,但有一些非常重要的调整。

 $('#ticket-marquee-css').text( "@-webkit-keyframes marqueeR{ 0%{text-indent: -" + distanceToMove + "px;} 100%{text-indent: 0;} }" + "@-webkit-keyframes marqueeL{ 0%{text-indent: 0;} 100%{text-indent: -" + distanceToMove + "px;} }" ); 

为了获得CSS转换更新,而不是使用以前定义的值,我必须停止animation,然后重新启动。 为了做到这一点,我在元素上放置了一个“活动”类,并使得CSS仅应用到具有该类的元素的转换

 #marquee1.active {-webkit-animation-name: marqueeL;} #marquee2.active {-webkit-animation-name: marqueeR;} 

然后,我只需要closures“活动”类,等待它应用在DOM(因此setTimeout),然后重新应用它。

 $('.ticket-marquee').removeClass('active'); setTimeout(function() { $('.ticket-marquee').addClass('active'); },1); 

这很好用! 现在我可以dynamic地改变文本移动的距离!