コンテンツの変更によるトランジション要素のサイズ

Question

ボタンがあり、その中にテキストがいくつかあります。これを押すと、テキストが変わります。これにより、ボタンの幅が変更されます。あなたが明示的にwidthプロパティを変更したときのみ動作することを、もちろん

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

：1はこのようなもので、要素の幅の変化を移行することができればそれは素晴らしいことです。

エレガントこの効果を達成する方法を知っている人はいますか？ Here's a (yet-to-function) fiddle to hack away at。

Answer 1

jQueryを使用してthis fiddleを試してみてください。

Answer 2

ブラウザは正確な目標幅を取得できないため、これは不可能です。トランジション前の値を持っているとしましょうが、その時点でボタンは幅に達しています！たぶんタンシジョンが存在し、私たちはそれを見ることができません。 最初の幅が必要なので、ターゲットの幅も知っておく必要があります。js

Answer 3

Maurice's answerでは、ボタンのテキストが2番目の行にオーバーフローし、ボタンの高さを強制的に元に戻しました高さ。ボタンのテキストが1行にとどまり、移行ながら示されているように 代わりに、

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/