1

画面上で画像を移動するだけの次のコードがあります。

                /* This is the animation code. */
        @-webkit-keyframes example {
   from { -webkit-transform: translateX(0px); }
   to   { -webkit-transform: translateX(1900px) }
}

        /* This is the element that we apply the animation to. */
        img#container {
            -webkit-animation: example 1s ease 0s 1 normal;
        }

頭を抱えることができない問題は、translateXアニメーションの値を、画面の中央のx位置など、JavaScriptで計算された値に設定することです。javascriptで「to」属性を設定してからID名を適用する方法はありますか？

4

2 に答える 2

3

CSS3変換値を設定するには、jQueryと.transitプラグインの使用を検討してください。その Web ページには、さまざまな CSS3 アニメーション効果のデモが説明されています。

例：

$('#container').transition({ x: '1900px' });

彼らのソース コードを見ると、目的の出力を作成するには大量の相対的なスタイル情報が必要になるため、jQuery でさまざまな効果を実行するのは面倒であることがわかります。次に、その jQuery を純粋な JavaScript の等価物に変換することには目を見張るものがあります。

translate Xを使用して.transitプラグインをテストする: jsFiddle

于 2012-06-17T04:25:28.903 に答える
0

例として、CSS 式を使用して JS 値を CSS クラスに設定できます。

height:expression(document.body.clientHeight + "px");

これが CSS 式の書き方です。

于 2012-06-17T04:39:18.377 に答える