用于扩展搜索框的CSS转换

Question

我正在尝试使用CSS转换和简单的jQuery toggleClass来实现扩展的搜索输入效果。

我的尝试取得了一定程度的成功，但仍远未达到我想要的目标。

到目前为止，我已经完成了一个JSFiddle： https://jsfiddle.net/3jhr24u3/

这是我想要完全实现的GIF：

我的HTML（如JSFIDDLE中所示）：

<form class="search-box pull-right" action="#" method="post">
    <span class="icon-magnifier search-icon"><img src="https://cdn0.iconfinder.com/data/icons/30_Free_Black_ToolBar_Icons/40/Black_Search.png" alt="Search" /></span>
    <input type="text" name="search-bar" class="search-bar" />
</form>

我的CSS（如在JSFIDDLE中）：

.search-box {
    position: relative;
    margin-left: 400px;
}
.search-icon {
    font-size: 1.875em;
    color: #1CB6B5;
    position: relative;
    float: left;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
}
.search-icon-open {
    z-index: 1000;
    color: #FFF;
    left: -290px;
}
.search-bar {
    background: #1cb6b5;
    border: 0 none;
    border-radius: 20px;
    width: 400px;
    height: 40px;
    color: #FFF;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
    width: 0px;
    padding: 0;
    position: absolute;
    right: 0;
}
.search-bar-open {
    display: block;
    width: 400px;
    padding-left: 40px;
    padding-right: 10px;
    top: 0;
}

Answer 1

您需要执行的操作绝对是将搜索图标放在('1', 'A', 'a') ('1', 'A', 'b') ('1', 'B', 'a') ('1', 'B', 'b') ('1', 'C', 'a') ('1', 'C', 'b') ('1', 'D', 'a') ('1', 'D', 'b') ('2', 'A', 'a') ('2', 'A', 'b') ('2', 'B', 'a') ('2', 'B', 'b') ('2', 'C', 'a') ('2', 'C', 'b') ('2', 'D', 'a') ('2', 'D', 'b') ('3', 'A', 'a') ('3', 'A', 'b') ('3', 'B', 'a') ('3', 'B', 'b') ('3', 'C', 'a') ('3', 'C', 'b') ('3', 'D', 'a') ('3', 'D', 'b') 的父级位置，并在点击时将其更改为right: 0px（搜索栏的宽度）。

如果您不希望搜索图标与页面右侧对齐，则可以取消父表单上的right: 400px，并根据需要添加margin-left。< / p>

width

Demo Fiddle（Stack Snippet无法正常工作，因为库没有加载。不确定它是否适合我）。