3

CSS3 変換アニメーションを使用して、オブジェクトを 10px 移動します。

@-webkit-keyframes move{
  0% {}
100% {
     -webkit-transform: translate(10px);
     }  
}

最初にオブジェクトが left=10px にあった場合、現在は left=20px にあるはずです。しかし、私がするとき

document.getElementById("obj").style.left

アニメーションの後でも、値 10px が返されます。javascript を使用して新しい値を取得するにはどうすればよいですか? できれば、jQueryやその他のフレームワークを使用しない回答:)

4

1 に答える 1

5

左の値は、要素が変換されているため同じであり、絶対位置で移動されていません。

余談ですが、これが非常に効率的である理由です。ブラウザは何を再描画するかを正確に指示できるため、翻訳がページ上の他の何にも影響を与えないため、ハードウェアアクセラレーションなどを簡単に行うことができます。

WebKitCSSMatrixを使用して内部で使用される変換行列を調べてから、既存のオフセットに追加することができますが、これを行う必要がある理由を調べるか、手動で追跡する（つまり、 10px、次に15pxで変換すると、25pxになります。）

于 2012-01-01T13:32:41.670 に答える