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; 
}