以编程方式更改动画规则中的 webkit-transformation 值

Question

我有这个样式表：

        @-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 解决方案也可以。

这是一款在移动 Apple Safari 浏览器中运行的 iPhone 游戏。

Answer 1

使用 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.styleSheets[0] 与 document.querySelector("link[href='your-css-url.css']") .sheet。

Answer 2

您是否尝试过在 html 文档头部的

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

Answer 3

从你的例子来看，我认为 CSS 动画可能有点矫枉过正。使用过渡：

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

然后通过 js 对元素应用新的转换：

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

它应该为该元素设置动画。

Answer 4

我不知道你什么时候想修改这些值（即使用变量），但尽管如此，这里有 3 到 4 个解决方案和 1 个不可能的解决方案（目前）。

• 服务器端计算：为了不时提供不同的 CSS，您可以告诉 PHP 或任何服务器端语言将 .css 文件解析为以及 .php 或 .html，然后在 PHP 标记之间使用 PHP 变量。注意文件缓存：为了避免它，您可以加载一个样式表，如 style.css？1234567890随机或时间它会产生一个明显不同的文件，因此不会被缓存

• SASS 也是一个需要 Ruby 的服务器端解决方案，将为您提供现有的语法，可能比手工制作的解决方案，就像其他人已经关于问题和解决方案一样

• LESS 是一个客户端解决方案，它将加载您的 .less 文件和一个 less.js 文件，该文件将解析前者并为您提供变量在 CSS 中，无论你的服务器是什么。它还可以在服务器端与node.js一起工作

• 在显示页面时动态修改 CSS？
  对于 2D，有 jquery-animate-enhanced 来自 Ben Barnett，2d-transform 或 CSS3 旋转 的方向相反（它们在可能的情况下使用 CSS3，并且在没有此类功能的情况下，它们回退到现有的 jQuery .animate() 和 IE 矩阵过滤器）但仅此而已。
  您可以创建一个 jQuery 插件，它可以使用一些参数来管理您想要通过 3D 实现的目标转换并避免在 DOM 中修改又长又复杂的 CSS 规则的麻烦

• 仅 CSS：您可以使用 -moz-calc [1][2] 仅适用于 Firefox 4.0，而 -webkit-transform 仅适用于...好吧没关系:-)

Answer 5

尝试这样的事情：

var height = {whatever height setting you want to detect};
element.style.webkitTransform = "translate3d(0px," + height*i + ",0px)";

Answer 6

一个“厚重”的解决方案？

在您选择的粒度内创建高度变换，例如 0-99、100-199、200-299 等。每个变换都有一个唯一的动画名称标识符，例如：

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

然后创建匹配的 css 类：

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

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

然后使用 javascript 决定您所在的块并将适当的类分配给周围的元素。

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

如果粒度不是太细的话可能还可以！

Answer 7

我使用了 warmanp 的解决方案并且它有效，但进行了一些非常重要的调整。

$('#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 过渡，我必须停止动画，然后重新启动，而不是使用之前定义的值。为此，我在元素上放置了一个“active”类，并使 CSS 仅将过渡应用于具有该类的元素

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

然后我只需关闭“active”类，等待它应用DOM（因此是 setTimeout），然后重新应用它。

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

效果很好！现在我可以动态改变文本移动的距离！