Có thể nhận giá trị thuộc tính css đích trong quá trình chuyển đổi css3 trong Javascript không?

Question

Tôi có hai số div được định vị absolutly và tôi định vị chúng tương đối với nhau. Khi width của một thay đổi, sau đó tôi tính toán lại và đặt vị trí. Trong khi tôi sử dụng chuyển tiếp css3 trên thuộc tính 'width', khi tôi cố gắng nhận được 'width' của hoạt ảnh, nó mang lại cho tôi giá trị hiện tại trên dom. Nhưng tôi muốn có được giá trị đích của quá trình chuyển đổi để thiết lập vị trí chính xác khi bắt đầu hiệu ứng chuyển tiếp. Điều này có thể nhận được giá trị mục tiêu thông qua javascript hoặc các cách khác không?

EDIT

Dưới đây là một jsfiddle chứng tỏ vấn đề của tôi. Nó cảnh báo '100px' nhưng tôi cần phải có '300px'.

http://jsfiddle.net/Mdbgs/

Cảm ơn.

Answer 1

Đó là bởi vì .css('width') đang kêu gọi getComputedStyle trên các yếu tố, mà trả về giá trị đang chuyển đổi. Nếu bạn đã trực tiếp truy cập vào phong cách, bạn sẽ nhận được những gì bạn vừa đã thiết lập:

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

(updated fiddle)

Answer 2

Bạn có thể sử dụng các sự kiện transitionend: (see for equivalent prefixed vendor)

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

DEMO