web-dev-qa-db-ja.com

JavaScript変数を使用してWebkitキーフレーム値を設定する

乱数を生成し、回転値の代わりにここで使用される変数として出力するための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"を使用していると仮定します。ランダム要素を忘れます。

ありがとう。

javascriptcssvariableswebkitkeyframe
33
Sasha

オーケー、実際のコードはどのように見えるかはわかりませんが、JavaScript変数をCSSにスローすることはできません。認識されません。

代わりに、JavaScriptを使用してCSSルールを作成し、CSSOM（CSSオブジェクトモデル）に挿入する必要があります。これはいくつかの方法で実行できます。キーフレームアニメーションを作成して追加するか、既存のアニメーションを上書きすることができます。この質問のために、既存のキーフレームアニメーションをさまざまな回転値で継続的に上書きすることを想定します。

JSFiddleをまとめて（そして文書化して）ご覧になります： http://jsfiddle.net/russelluresti/RHhBz/2/

-10-> 10度の回転アニメーションの実行を開始しますが、ボタンをクリックすると、ランダムな値（-360〜360度）の間で回転を実行できます。

この例は、主にサイモン・ハウスマンによって行われた以前の実験から一緒にハッキングされました。ここにソースがあります： http://www.gitorious.org/~simon/qtwebkit/simons-clone/blobs/ceaa977f87947290fa2d063861f90c820417827f/LayoutTests/animations/change-keyframes.html （長い間そのリンクが機能するため、gitoriousはURLを維持するのがかなり苦手です）。

また、ここから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でテストしましたが、両方のブラウザーで正常に動作するようです。

お役に立てれば。

73
RussellUresti

_chrome 49_以降および_Firefox 48_以降では、新しいJavascript API element.animate()を利用してキーフレームアニメーションをプッシュできます。

このAPIは実験的なものであり、上記を除いてクロスブラウザで動作しないことをご了承ください。

classまたは injecting keyframes を追加するような日付付きソリューションは、後方互換性のために活用できます。同じためのシムはすぐに利用できませんでした。

MDNの例をヤンクしました

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

参照：

7
DDM

2017年にこの回答を探している人のために、 RussellUresti answer の変更点を紹介します。

彼の例では、これはもう機能しません：

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

CSSKeyframeRuleの詳細については、こちらをご覧ください

1
connoraworden