输入框上的`transition：width 1s`增加宽度

Question

demo fiddle

使用transition: width 1s和$('input').css('width', '300px');输入框变为0px宽，然后转换为300px。 如何从现有宽度过渡到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元素指定默认宽度时执行此操作：

updated fiddle

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