web-dev-qa-db-ja.com

アニメーションルールの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);
            }
        }

純粋なCSSソリューションでも問題ありませんが、JavaScriptとjQueryを使用できるようにしたいと思います。

これは、モバイルApple Safariブラウザで実行されるiPhoneゲーム用です。

javascriptcsssafariwebkitmobile-safari
23
clamp

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に置き換えてください。

41
Eli Grey

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

あなたの例からすると、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)";

それをアニメートする必要があります。

3
Tokimon

これらの値を変更したい（つまり、変数を使用したい）ときはわかりませんでしたが、それでも、3〜4つの解決策と1つの不可能な解決策（今のところ）があります。

  • サーバーサイド計算：時々異なるCSSを提供するために、PHPまたは任意の解析するサーバーサイド言語.cssファイルと.phpまたは.html次に、PHP = PHPタグの間にある変数を使用します。ファイルのキャッシュに注意してください。これを回避するには、style.cssのようなスタイルシートをロードできますか？ 1234567890ランダムまたは時間それは明らかに異なるファイルを生成するため、キャッシュされません

  • [〜＃〜] sass [〜＃〜]も、Ruby既存の構文を提供します。おそらく、他の人がすでに問題や解決策について持っているように、手作りの解決策よりもクリーンです。

  • [〜＃〜] less [〜＃〜]は、.lessファイルをロードするクライアント側のソリューションです。前者を解析し、サーバーが何であれ、CSSで変数を提供するless.jsファイル。また、node.jsを使用してサーバー側で機能することもできます

  • ページが表示されている間、CSSは動的に変更されます？
    2Dの場合、Ben Barnettから jquery-animate-enhanced 、 2d-transform または CSS3rotate が逆にピッチされます。周り（可能な場合はCSS3を使用し、そのような関数がない場合は、既存のjQuery .animate（）およびIEマトリックスフィルター）にフォールバックしますが、それだけです。
    次のことができます jQueryのプラグインを作成 3D変換で達成したいことをいくつかのパラメーターで管理し、DOMで長くて複雑なCSSルールを変更する手間を省きます

  • CSSのみ：Firefox4.0でのみ機能する-moz-calc [ 1 ] [ 2 ]を使用できます- webkit-でのみ機能する変換... OK気にしないでください:-)

2
FelipeAls

次のようなものを試してください。

 var height = {検出する高さの設定}; 
 element.style.webkitTransform = "translate3d（0px、" + height * i + "、0px）";
1
probbins222

「分厚い」解決策？

選択した粒度（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');

粒度が細かくなりすぎなければ大丈夫かもしれません！

1
Al.

私は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トランジションを更新するには、以前に定義した値を使用する代わりに、アニメーションを停止してから再起動する必要がありました。これを行うために、要素に「アクティブ」のクラスを配置し、CSSがそのクラスを持つ要素にのみ遷移を適用するようにしました

#Marquee1.active {-webkit-animation-name: marqueeL;}
#Marquee2.active {-webkit-animation-name: marqueeR;}

次に、「アクティブ」クラスをオフに切り替え、それがDOMに適用されるのを待って（したがって、setTimeout）、再適用する必要がありました。

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

そして、それはうまくいきます！これで、テキストの移動距離を動的に変更できます。

0
Ben Jaffe