css - 幅を増やす入力ボックスの `transition: width 1s`

Question

デモフィドル

transition: width 1s入力ボックスと一緒に使用すると$('input').css('width', '300px');、300px に移行する前に幅が 0px になります。既存の幅から 300px に移行するにはどうすればよいですか?

また、左から右ではなく、右から左に移行する方法はありますか? または中央の静的で左右の両方が増加しますか？

html

<input type='text'> </input>
<button> increase width </button>

js

$('button').click(function(){
    $('input').css('width', '300px');
});

CSS

input {
    transition: width 2s;
    left: 0px
}

Answer 1

はい、入力要素にデフォルトの幅を指定すると、次のことができます。

更新されたフィドル

input {
    transition: width 2s;
    width:200px; 
}