javascript - 过渡不起作用 CSS

Question

目前我的页面上有一些 JQuery，它允许用户单击按钮，然后它将打开一个搜索框。但是，我希望我的搜索框能够慢慢地滑开，而不是直接从现在的位置弹出。因此，我在 CSS 中添加了 2 个类的转换，但它们不想工作。

这是我的 HTML:

<form class="ngen-search-form form-search" action="search" method="get">
    <input type="text" name="q" id="search-input" class="form-search-input" placeholder="Search for games..." dir="ltr">
    <input type="text" onclick="expandSearch()" readonly="readonly" class="form-search-submit" value="&#x1f50e;">
</form>

CSS:

.form-search-input{
    width:0px;
    height:55px;
    display:none;
    border: 0;
    outline: 0;
    font-size:21px; 
    padding: 0px 0px 0px 20px;
    color: #151515;
    transition: .5s;
}
.search-input-open{
    width:410px !important;
    display: initial !important;
    transition: .5s;
}
.form-search-submit{
    width:55px;
    height:45px;
    border: 0;
    outline: 0;
    background-color:#151515;
    font-size:21px;
    color: white;
    cursor: pointer;
    text-align:center;
}

和 JQuery:

function expandSearch(){
            $('#search-input').toggleClass('search-input-open');
        }

关于它可能无法工作的任何想法？

谢谢

Answer 1

试试这个:

.form-search-input{
    width:0px;
    height:55px;
    border: 0;
    outline: 0;
    font-size:21px; 
    padding: 0px 0px 0px 0px;
    color: #151515;
    transition: all 0.5s;
}

.form-search-submit{
    display:inline-block;
    width:55px;
    height:45px;
    border: 0;
    outline: 0;
    background-color:#151515;
    font-size:21px;
    color: white;
    cursor: pointer;
    text-align:center;
}

.search-input-open{
    width:410px;
    padding: 0px 0px 0px 20px;
}

The JSFiddle