Попытка выполнить переходы CSS через JavaScript не сработает

Если вы используете JS, чтобы сделать элемент видимым И добавить класс для запуска перехода, это не сработает, потому что JS выполняет оба этих действия одновременно. Переход сработает, если свойство элемента будет изменено, но в этом случае свойство top никогда не изменяется, оно уже было там, когда элемент стал видимым.

Вы можете добавить действие JS между ними, чтобы вызвать перекомпоновку браузера. Таким образом, браузер сначала делает элемент видимым, рисует его на странице, а затем добавляет класс для запуска перехода.

searchBar.style.display = "flex";
searchBar.offsetWidth;
searchBar.classList.add("search-bar-open")

проблема в том, что переходы не работают для свойств display: none, вместо того, чтобы использовать display none для гибкости, просто сделайте что-нибудь, чтобы скрыть панель поиска, не делая display: none;

одно из возможных решений — задать отрицательное верхнее значение для удаления из видимого окна. например top: -50px (или вы можете указать точное значение, соответствующее высоте панели поиска)

let isSearchBarOpen = false;

    function toggleSearchBar() {
          if (isSearchBarOpen) {
            searchBar.style.top= "-50px";   //here used top instead of display
          } else {
             searchBar.classList.add("search-bar-open")
          }
          isSearchBarOpen = !isSearchBarOpen;
            
          toggleSearchIcon();
      }

.search-bar {
    display: flex;      //here let it to be flex
    background-color: #000;
    color: #fff;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding: 10px 5px;
    z-index: 1000; 
    margin: 0 auto;
    transition: top 2s ease-in;
}

.search-bar-open {
    top:90px; 
}

Переход не работает для display:none. Итак, вместо перехода используйте анимацию.

пример кода:

CSS:

       .search-bar {
            display: none;
            background-color: #000;
            color: #fff;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            padding: 10px 5px;
            z-index: 1000;
            margin: 0 auto;
            animation: toggleOnAnimation 2s ease-in;
        }

        .search-bar-open {
            top: 90px;
        }

        @keyframes toggleOnAnimation {
            0% {
                top: 0
            }

            100% {
                top: 90px
            }
        }

Javascript:

        let isSearchBarOpen = false;
        let searchBar = document.getElementById("search-bar");
        function toggleSearchBar() {
            if (isSearchBarOpen) {
                searchBar.style.display = "none";
            } else {
                searchBar.style.display = "flex";
                searchBar.classList.add("search-bar-open")
            }
            isSearchBarOpen = !isSearchBarOpen;

        }

HTML:

    <div class = "search-icon">
        <i class = "fas fa-search search-icon-header"></i>
        <!-- <img src = "images/close-icon.svg" alt = "close-icon-search" class = "close-icon-search"> -->
        <button onclick = "toggleSearchBar()">Click</button>
    </div>
    <div class = "search-bar" id = "search-bar">
        <div class = "search-container">
            <form class = "search-form">
                <input type = "text" placeholder = "Search...">
                <button type = "submit">
                    Submit
                </button>
            </form>
        </div>
    </div>

Здесь я использовал анимацию вместо перехода. Надеюсь, вы поняли :)