40

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

ありがとう。

4

3 に答える 3

78

わかりました、実際のコードがどのように見えるかではありませんが、JavaScript 変数を CSS に入れることはできません。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 (そのリンクが機能する限り、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 でこれをテストしましたが、両方のブラウザで問題なく動作するようです。

お役に立てれば。

于 2012-04-27T04:09:49.933 に答える
19

chrome 49今後はFirefox 48、新しい Javascript API を活用element.animate()して、キーフレーム アニメーションをプッシュできます。

この API は実験的なものであり、上記以外のクロス ブラウザーでは機能しないことをご承知おきください。

キーフレームclassの追加や挿入などの古いソリューションは、下位互換性のために活用できます。同じシムはすぐには入手できませんでした。

MDN の例をヤンクしました

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

参照：

于 2016-08-25T09:22:10.053 に答える