アカウント名:
パスワード:
left や transform の値は JavaScript からは読めないので、自分で計算して値を書かなければいけません(レンダリングエンジンが知っているはずの値を自分でも別途管理しなければいけないというのはイマイチな感じがしますね。何か良い方法はありますか?)。
これは、JavaScriptから読めます。 window.getComputedStyle() メソッド [mozilla.org]を使うと、要素の現在時点での計算済みスタイルを返すオブジェクト(CSSStyleDeclaration オブジェクト)を得ることができます。複雑なアニメーション中の要素も任意のタイミングでスタイルを取得できます。 参考になりそうなQiita記事 [qiita.com]
left の値は 42.1
window.getComputedStyle() を試してみました。それで分かったことは、これで返って来る値は、自分がセットした値だと言う事です。例えば、left:100px から transform:translateX(200px) にアニメーションさせた後の値は、 left: 100px transform: matrix(1, 0, 0, 1, 200, 0)が得られます。
mozilla.org の解説で「計算し直した後 [w3.org]」の値を返すと書いてありますが、ここでの計算とはレンダリングエンジンが実行したリアルタイムな値では無く、設定した値を計算した物のようです。上述の例だと、translateX(200px) が matrix(1, 0, 0, 1, 200, 0) と計算されたのですね。念のため、window.getComputedStyle で返ってきた値を全て見てみましたが、残念ながら現在値はどこにも書かれていませんでした。
考えてみれば、現在値が知りたければ、それは CSS style では無いですね。もっと奥深いところにあると想像できます。^^;
実際にレンダリングエンジンが計算した値を得られれば、300.12px とかが得られたかもしれないと思います(イージグで小数点計算していると思うから誤差が入っている可能性があります。実際、アニメ後に値をセットし直すと1px動くことがあるっぽいです)
でもまあ、いろいろ知見が得られました。情報提供に感謝致します!
あっ、ごめんなさい!!
ちゃんと現在値が入っている(っぽい)のが確認できました。アニメの最初だと tarnsform に matrix(1, 0, 0, 1, 0, 0) が入っています。やった!
確認が甘いままコメントを書いてすみませんでした。
より多くのコメントがこの議論にあるかもしれませんが、JavaScriptが有効ではない環境を使用している場合、クラシックなコメントシステム(D1)に設定を変更する必要があります。
あと、僕は馬鹿なことをするのは嫌いですよ (わざとやるとき以外は)。-- Larry Wall
CSSスタイルの現在値はJavaScriptで読めます (スコア:1)
これは、JavaScriptから読めます。
window.getComputedStyle() メソッド [mozilla.org]を使うと、要素の現在時点での計算済みスタイルを返すオブジェクト(CSSStyleDeclaration オブジェクト)を得ることができます。
複雑なアニメーション中の要素も任意のタイミングでスタイルを取得できます。
参考になりそうなQiita記事 [qiita.com]
left の値は 42.1
Re:CSSスタイルの現在値はJavaScriptで読めます (スコア:2)
window.getComputedStyle() を試してみました。
それで分かったことは、これで返って来る値は、自分がセットした値だと言う事です。
例えば、left:100px から transform:translateX(200px) にアニメーションさせた後の値は、
left: 100px
transform: matrix(1, 0, 0, 1, 200, 0)
が得られます。
mozilla.org の解説で「計算し直した後 [w3.org]」の値を返すと書いてありますが、ここでの計算とはレンダリングエンジンが実行したリアルタイムな値では無く、設定した値を計算した物のようです。
上述の例だと、translateX(200px) が matrix(1, 0, 0, 1, 200, 0) と計算されたのですね。
念のため、window.getComputedStyle で返ってきた値を全て見てみましたが、残念ながら現在値はどこにも書かれていませんでした。
考えてみれば、現在値が知りたければ、それは CSS style では無いですね。もっと奥深いところにあると想像できます。^^;
実際にレンダリングエンジンが計算した値を得られれば、300.12px とかが得られたかもしれないと思います(イージグで小数点計算していると思うから誤差が入っている可能性があります。実際、アニメ後に値をセットし直すと1px動くことがあるっぽいです)
でもまあ、いろいろ知見が得られました。
情報提供に感謝致します!
Re:CSSスタイルの現在値はJavaScriptで読めます (スコア:2)
あっ、ごめんなさい!!
ちゃんと現在値が入っている(っぽい)のが確認できました。
アニメの最初だと tarnsform に matrix(1, 0, 0, 1, 0, 0) が入っています。
やった!
確認が甘いままコメントを書いてすみませんでした。