सामग्री परिवर्तनों के कारण संक्रमण तत्व आकार

Question

मेरे पास एक बटन है जिसमें इसमें कुछ टेक्स्ट है। जब आप इसे दबाते हैं, तो टेक्स्ट बदल जाता है। यह बटन की चौड़ाई बदल देता है।

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

बेशक

, कि केवल काम करता है जब आप स्पष्ट रूप से width संपत्ति बदलने के लिए: यह बहुत अच्छा है, तो एक कुछ इस तरह के साथ एक तत्व की चौड़ाई के परिवर्तन संक्रमण हो सकता है किया जाएगा।

क्या किसी को इस प्रभाव को प्राप्त करने के लिए सुरुचिपूर्ण तरीका पता है? Here's a (yet-to-function) fiddle to hack away at।

Answer 1

this fiddle कि 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

मुझे लगता है कि यह असंभव है, क्योंकि ब्राउज़र को सटीक लक्ष्य चौड़ाई नहीं मिल सकती है; मान लें कि इसे संक्रमण से पहले मूल्य मिला है, लेकिन उस समय, बटन चौड़ाई तक पहुंच गया है! शायद संविधान मौजूद है, और हम इसे नहीं देख सकते हैं। ताकि आप एक प्रारंभिक चौड़ाई की जरूरत है, और आप को पता है लक्ष्य चौड़ाई भी, हमें जे एस

Answer 3

Maurice's answer के साथ, बटन के पाठ एक दूसरी पंक्ति है, जो चारों ओर अपने मूल करने के लिए बटन की ऊंचाई पर बाध्य करके काम किया गया था करने के लिए सीमा से बाहर हो की जरूरत है ऊंचाई। इसके बजाय,

button { 
    white-space: nowrap; 
} 

का उपयोग करें ताकि बटन के पाठ एक पंक्ति पर रहता है और जब तक संक्रमण में दिखाया गया है। तो कोड नहीं रह गया है बटन की ऊंचाई से निपटने के लिए है, इसलिए यह आसान हो सकता है:

$('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/