Kích thước phần tử chuyển đổi do thay đổi nội dung gây ra

Question

Tôi có một nút có một số văn bản trong đó. Khi bạn nhấn nó, văn bản sẽ thay đổi. Điều này làm cho chiều rộng của nút thay đổi. Nó sẽ là tuyệt vời nếu ta có thể chuyển việc thay đổi chiều rộng của một nguyên tố với một cái gì đó như thế này:

#el { 
    transition: width 150ms ease-out; 
} 

Tất nhiên, đó chỉ có tác dụng khi bạn thay đổi một cách rõ ràng width tài sản.

Có ai biết một số thanh lịch cách nào để đạt được hiệu ứng này không? Here's a (yet-to-function) fiddle to hack away at.

Answer 1

Hãy thử this fiddle bằng cách sử dụng jQuery.

$('button').click(function() { 
    var width = $(this).css('width'); 
    var height = $(this).css('height'); 
    $(this).html('Hello, World!'); 
    var newWidth = $(this).css('width'); 
    $(this).css({'width': width, 'height': height}); 
    $(this).animate({'width': newWidth}, 1000); 
});​ 

Answer 2

Tôi đoán điều này là không thể, bởi vì trình duyệt không thể có được chiều rộng mục tiêu chính xác; Giả sử nó có giá trị trước khi chuyển đổi, nhưng tại thời điểm đó, nút đã đến độ rộng! Có lẽ tansition tồn tại, và chúng ta không thể nhìn thấy nó. vì vậy bạn cần chiều rộng ban đầu và bạn cần phải biết chiều rộng mục tiêu quá, chúng tôi js

Answer 3

Với Maurice's answer, văn bản của nút tràn đến dòng thứ hai, được làm việc xung quanh bằng cách buộc chiều cao của nút Chiều cao. Thay vào đó, hãy sử dụng

button { 
    white-space: nowrap; 
} 

để văn bản của nút nằm trên một dòng và được hiển thị trong khi chuyển đổi. Sau đó, các mã không còn phải đối phó với chiều cao của nút, vì vậy nó có thể trở nên đơn giản hơn:

$('button').click(function() { 
    var width = $(this).css('width'); 
    $(this).text('Hello, World!'); 
    var newWidth = $(this).css('width'); 
    $(this).css({'width': width}); 
    $(this).animate({'width': newWidth}, 400); 
}); 

http://jsfiddle.net/2rr54vp2/1/