Javascript help-Menu

Question

Хочу сделать так, чтобы, когда мои пункты меню переходили, появлялась панель поиска.

let menuItemsQuerySelector = document.querySelectorAll(".menu-item");
searchElement.addEventListener("click", function() {
  console.log("Clicked search");
  menuItemsQuerySelector.forEach(function(menuItem) {
    console.log("Boom");
    menuItem.classList.toggle("hide-item");

  });
});
};

это то, что у меня есть, чтобы заставить анимацию переключения работать.Мои предложения для панели поиска: search-from, мне нужно как-то активировать ее, когда исчезает меню.Класс css уже настроен.

Answer 1

Вы можете использовать событие «transitionend» для выполнения кода после завершения перехода. Вам необходимо добавить логическое значение, чтобы проверить, был ли переход скрыт-видимым или видимым-скрытым

let hidden = false;
searchElement.addEventListener("click", function() {
    hidden = true;
    //your other code
});

//Further down the line when showing your elements again
hidden = false;

Однако, учитывая, что у вас есть несколько элементов, которые переходят одновременно, вы можете: Подцепить событие только на одном из них

menuItemsQuerySelector[0].on('transitionend', () => {
    if(hidden)
    //your code here
});

или используйте функцию по времени

setTimeout(() => {
    if(hidden)
    //your code here
}, <delay in millisecods>);