Мобильная версияПереходы CSS у меня не работают, когда я пытаюсь выполнить их с помощью JavaScript.
Это мой HTML-код
А это моя функция в JavaScript:
let isSearchBarOpen = false; функция toggleSearchBar() { если (isSearchBarOpen) { searchBar.style.display = "нет"; } еще { searchBar.style.display = "гибкий"; searchBar.classList.add("панель поиска-открыть") } isSearchBarOpen = !isSearchBarOpen; переключитьИконкуПоиска(); } Когда открывается панель поиска, добавляется класс .search-bar-open.
Теперь CSS:
.search-bar { дисплей: нет; цвет фона: #000; цвет: #fff; позиция: абсолютная; верх: 0; слева: 0; правильно: 0; отступ: 10 пикселей 5 пикселей; z-индекс: 1000; маржа: 0 авто; переход: легкий вход в топ-2; } .search-bar-open { верх: 90 пикселей; } При нажатии кнопки поиска происходят следующие вещи (или должны произойти, если я не ошибаюсь):
[*]Функция проверяет, имеет ли isSearchBarOpen значение true или false. [*]Если true — то есть если панель поиска открыта — добавляется встроенный стиль (display:none), скрывающий панель. [*]Если это false, то есть если панель поиска закрыта, добавляется встроенный стиль (display:flex), чтобы он отображался. И, кроме того, добавляется класс (.search-bar-open).
Оттуда, если мы посмотрим на CSS…
[*]
При открытии панели поиска (когда она появляется) загружается класс .search-bar-open и встроенный стиль display:flex. С одной стороны, указанный встроенный стиль переопределяет свойство CSS display:none, применяемое через класс .search-bar, по своей специфике.
[*]
Кроме того, добавлен класс .search-bar-open.
[*]
Теперь я предполагаю, что при применении класса .search-bar-open должен произойти переход, предусмотренный в .search-bar, который это:
а. Я в top:0;… б. И за 2 секунды с легкостью… в. У меня установлен top:90px;.
Я что-то, должно быть, неправильно понял, раз это не работает
