2013-08-28 9 views
5

私は絶対にに配置された2つのdivを持っていて、それらを互いに対して相対的に配置します。 widthが変更された場合は、再計算して位置を設定します。 'width'プロパティでcss3トランジションを使用していますが、アニメーション化された 'width'を取得しようとすると、domの現在の値が表示されます。しかし、私は移行効果の開始時にポジションを正しく設定するために遷移の目標値を取得したい。これはJavaScriptや他の方法で目標値を得ることは可能ですか?以下はJavascriptでcss3トランジション中にターゲットcssプロパティ値を取得することはできますか?

EDITはjsfiddleは私の問題を示しています。それは '100px'を警告するが、私は '300px'を得る必要がある。

http://jsfiddle.net/Mdbgs/

ありがとう。

+0

はあなたが私達にあなたのコードを表示することができますか?おそらく、問題を理解するためにjsfiddleでサンプルを作成することを検討し、問題を理解して助けてください。 – trrrrrrm

+0

どのように幅を設定しますか?それは "自動"で、それは自動的に拡大/縮小されますか? –

+0

私はフィドルを作成しようとしました –

答えて

5

。あなたが直接スタイルにアクセスしなかった場合、あなたは単に設定していたものを手に入れるでしょう:

document.getElementById('transition_div').style.width 
$('#transition_div').prop('style').width 
$('#transition_div')[0].style.width 

updated fiddle)は

+0

あなたは素晴らしい男です、それは私が求めていたものです。答えてくれてありがとう。 –

+1

何とか計算されたCSSプロパティの値を取得できますか?私はいつスタイルが指定されていないのか:http://stackoverflow.com/questions/18975412/is-it-possible-to-get-the-target-calculated-css-property-value-during-a-css3-tra –

2

あなたがtransitionendイベントを使用することができます。.css('width')は移行値を返さない要素、上getComputedStyleを呼び出しているためです(see for equivalent prefixed vendor

$('#transition_div').css('width', 300).on("transitionend", function() { 
    alert($(this).css('width')); 
}); 

DEMO

+0

私はその出来事について知りませんでした。しかし、実際には私は移行の開始時に価値を得る必要があります。これを行う法的または違法な方法はありますか? –

+0

あなたの問題を理解していないので、@ JonasGrumannのコメントを参照してください。 DIVを特定の値にアニメートすると、その値が分かります。 –

+0

私は同じ問題を抱えており、私はおそらく同じように実証しているでしょう。実際のコードでは、アニメーションを行っている部分とチェックしている部分がまったく別の場所にあります。私が値を読み取る必要がある部分は実際に私のテストの中にあります。 – terrinecold

関連する問題