Ошибка поля ввода ширины jQuery

Question

Я сделал пользовательский блок поиска, который выдвигается при нажатии на значок поиска. Когда блок поиска открывается впервые, возникает ошибка, при которой поле ввода становится 100% шириной всего экрана в течение 1 секунды, а не только в блоке поиска.

$(document).ready(function() {

    var search_block = $('.search-block');
    var search_block_overlay = $('.search-block-overlay');

    $('#dashboard-sub-search').on('click', function() {

        search_block.animate({width: "toggle"}, 300);
        search_block.addClass("search-block-active");
        search_block_overlay.addClass("search-block-overlay-active");
    });

    $('#close-search').on('click', function() {
        search_block.animate({width: "toggle"}, 300);
        search_block.css({'display': 'none'});
        search_block_overlay.removeClass("search-block-overlay-active");
    });
});

.search-block {
    display: none;
}

.search-header {
    display: flex;
}

.search-form {
    width: 100%;
}

.search-content {
    margin-left: 38px;
}

.close-search {
    cursor: pointer;
    font-size: 36px;
}

.search-block-active {
    display: block;
    background: white;
    position: absolute;
    width: 600px;
    height: 100vh;
    top: 0;
    padding: 30px;
}
.search-block-overlay {
    display: none;
}
.search-block-overlay-active {
    display: block;
    background-color: rgba(9, 30, 66, 0.54);
    width: calc(100% - 600px);
    height: 100vh;
    position: absolute;
    top: 0;
    right: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css">


<div class="dashboard-sub-top-search mt-4">
    <i id="dashboard-sub-search" class="fa fa-search dashboard-sub-search"></i>
</div>

<div class="search-block">
    <div class="search-header">
        <div class="close-search-block mr-3">
            <i id="close-search" class="fa fa-times close-search"></i>
        </div>
        <div class="search-form">
            <input type="text" class="form-control" placeholder="Search">
        </div>
    </div>
    <div class="search-content mt-5">
        <h6>Recent search history</h6>
    </div>


</div>
<div class="search-block-overlay"></div>

После начального открытия все нормально. Это происходит только тогда, когда он открывается в первый раз. Я сделал блок со следующим кодом:

Как я могу это исправить?

Answer 1

Вот код, работающий по желанию (надеюсь).

Я переместил код для search-block-active (кроме свойства display) из этого класса в search-block (то же самое с search-block-overlay).

Этоможет показаться нелогичным: search-block имеет display: none, так почему это имеет значение, если для него определен width? Хитрость в том, как работает animate. Он просматривает определенную ширину блока, который он анимирует, и в основном вычисляет шаги (промежуточные ширины), необходимые для получения значения от 0 до этой ширины, и устанавливает ширину этих шагов каждые x миллисекунд, по всей сумме, которую вы дали.

Итак, теперь, когда мы сказали jQuery, насколько он будет широким, он может вычислить правильную сумму для анимации на каждом шаге.

$(document).ready(function() {

    var search_block = $('.search-block');
    var search_block_overlay = $('.search-block-overlay');

    $('#dashboard-sub-search').on('click', function() {

        search_block.animate({width: "toggle"}, 300);
        search_block.addClass("search-block-active");
        search_block_overlay.addClass("search-block-overlay-active");
    });

    $('#close-search').on('click', function() {
        search_block.animate({width: "toggle"}, 300);
        search_block.css({'display': 'none'});
        search_block_overlay.removeClass("search-block-overlay-active");
    });
});

.search-block {
    display: none;
    background: white;
    position: absolute;
    width: 600px;
    height: 100vh;
    top: 0;
    padding: 30px;
}

.search-header {
    display: flex;
}

.search-form {
    width: 100%;
}

.search-content {
    margin-left: 38px;
}

.close-search {
    cursor: pointer;
    font-size: 36px;
}

.search-block-active {
    display: block;
}
.search-block-overlay {
    display: none;
    background-color: rgba(9, 30, 66, 0.54);
    width: calc(100% - 600px);
    height: 100vh;
    position: absolute;
    top: 0;
    right: 0;
}
.search-block-overlay-active {
    display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css">


<div class="dashboard-sub-top-search mt-4">
    <i id="dashboard-sub-search" class="fa fa-search dashboard-sub-search"></i>
</div>

<div class="search-block">
    <div class="search-header">
        <div class="close-search-block mr-3">
            <i id="close-search" class="fa fa-times close-search"></i>
        </div>
        <div class="search-form">
            <input type="text" class="form-control" placeholder="Search">
        </div>
    </div>
    <div class="search-content mt-5">
        <h6>Recent search history</h6>
    </div>


</div>
<div class="search-block-overlay"></div>