2013-08-28 15 views
5

我有兩個divs 定位絕對我定位他們相對於彼此。當width之一是變化,然後我重新計算和設置職位。雖然我在'width'屬性上使用css3轉換,但當我嘗試獲取動畫效果的'width'時,它會給我dom上的當前值。但是我想在轉換效果開始時正確地設置轉換的目標值以設置位置。這可能通過JavaScript或其他方式獲得目標值?是否有可能在JavaScript中的css3轉換期間獲取目標css屬性值?

編輯

下面是一個展示的jsfiddle我的問題。它提醒'100px',但我需要'300px'。

http://jsfiddle.net/Mdbgs/

謝謝。

+0

你能告訴我們你的代碼?也許你應該考慮在jsfiddle上創建一個示例來突出顯示問題,以便我們可以理解您的問題並盡力幫助您解決問題。 – trrrrrrm

+0

你如何設定寬度?它是在「自動」,它會自動擴大/縮小? –

+0

讓我試着創建一個小提琴 –

回答

5

這是因爲.css('width')是調用元素,並返回過渡值上getComputedStyle。如果你是直接訪問的風格,你會得到你剛纔設置了什麼:

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事件:(see for equivalent prefixed vendor

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

DEMO

+0

我不知道那件事情,謝謝你的回答。但實際上,我需要在轉型開始時獲得價值。有沒有合法或非法的方式來做到這一點? –

+0

所以請參閱@JonasGrumann評論,因爲我也不明白你的問題。因爲,如果您將DIV製作爲特定值,那麼您就知道該值。 –

+0

我有同樣的問題,我可能會以相同的方式演示。對我來說會發生什麼,在真正的代碼中,動畫和正在檢查的部分在完全不同的地方。我需要讀取值的部分實際上是在我的測試中。 – terrinecold

相關問題