3

CSS3sを使う-webkit-transform: translate3d(x,y,z);と(x,y,z)の動きをjavascriptで動くようにトレースできますか?

例: オブジェクトは (0,0,0) から始まり、4 秒間かけて (4,4,0) に変換します。

理論的には、最初の秒では要素を (1,1,0) に配置し、2 番目の秒では要素を (2,2,0) に配置する必要があります。Javascript が追跡する方法はありますか?物体？

translate3d(x,y,z) の css プロパティを取得すると、最終的な移動座標が返されます。これは、設定されているものとして期待されます。

4

1 に答える 1

4

CSSトランジションを介して要素を移動している場合は、いいえ、要素をタックする方法はありません。transitionstartとtransitionendのみのイベントリスナーがあります。

javascriptを介してアニメーションを作成している場合は、はい、x、y、zを次のようにトレースできます。

node = document.getElementById("yourid");

//your animation loop
  console.log(window.getComputedStyle(node).webkitTransform); //this will return a string
  var curTransform = new WebKitCSSMatrix(window.getComputedStyle(node).webkitTransform);
  console.log(curTransfrom); //this will return an object
//end animation loop
于 2011-01-08T21:57:24.540 に答える