javascript - コンテンツの変更による遷移要素のサイズ

Question

テキストを含むボタンがあります。押すと文字が変わります。これにより、ボタンの幅が変更されます。次のようなもので要素の幅の変更を移行できれば素晴らしいでしょう:

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

もちろん、これはwidthプロパティを明示的に変更した場合にのみ機能します。

この効果を達成するためのエレガントな方法を知っている人はいますか? をハックする (まだ機能していない) フィドルを次に示します。

Answer 1

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

Maurice's answerでは、ボタンのテキストが 2 行目にはみ出していましたが、これはボタンの高さを元の高さに強制することで回避されました。代わりに、

button {
    white-space: nowrap;
}

ボタンのテキストが 1 行に収まり、遷移中に表示されるようにします。次に、コードはボタンの高さを処理する必要がなくなるため、より単純になります。

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

Answer 3

ブラウザは正確なターゲット幅を取得できないため、これは不可能だと思います。遷移前の値を取得したとしますが、その時点で、ボタンは幅に達しています! タンジションが存在しているのかもしれませんが、私たちはそれを見ることができません。したがって、初期幅が必要であり、ターゲット幅も知る必要があります.us js