Javascript 单击可平滑扩展输入字段宽度

我想在单击

.icon

类时显示一个输入字段

.search

。我用下面的代码成功地做到了这一点。但是，我不想显示/隐藏，而是希望通过平滑地扩展输入字段的宽度来显示输入字段

如何做到这一点

jsiddle演示：

<div class="box">
    <input class="search" type="search" placeholder="Search" />
     <div class="icon"></div>  
</div>

.box{
    position: relative;
    width: 220px;
}

.search {    
    width: 200px;
    padding: 5px;
      -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    transition: all .5s ease;
    float: left;
}


.icon{
    width: 20px;
    height: 20px;
    background: red; 
    position: absolute; 
    right: 0;
}

$('.icon').click(function() {
    $('.search').toggle();
});

HTML:

<div class="box">
    <input class="search" type="search" placeholder="Search" />
     <div class="icon"></div>  
</div>

.box{
    position: relative;
    width: 220px;
}

.search {    
    width: 200px;
    padding: 5px;
      -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    transition: all .5s ease;
    float: left;
}


.icon{
    width: 20px;
    height: 20px;
    background: red; 
    position: absolute; 
    right: 0;
}

$('.icon').click(function() {
    $('.search').toggle();
});

JS:

<div class="box">
    <input class="search" type="search" placeholder="Search" />
     <div class="icon"></div>  
</div>

.box{
    position: relative;
    width: 220px;
}

.search {    
    width: 200px;
    padding: 5px;
      -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    transition: all .5s ease;
    float: left;
}


.icon{
    width: 20px;
    height: 20px;
    background: red; 
    position: absolute; 
    right: 0;
}

$('.icon').click(function() {
    $('.search').toggle();
});

---

您应该使用

.slideToggle（）

或

fadeToggle（）

---

为什么不更改代码以切换类，从而在功能（JS）和样式（CSS）之间保持清晰的分离

下面是一些示例代码，您可能需要根据自己的具体需要进行编辑

JS

CSS