Javascript 帮助菜单

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");

  });
});
};

这就是我到目前为止使切换动画起作用的方法。我对搜索栏的要求是，搜索来源，我需要在菜单消失时以某种方式激活它。 CSS 类已设置。

Answer 1

您可以使用“transitionend”事件在转换结束后执行代码。您必须添加一个 bool 值来检查转换是隐藏-可见还是可见-隐藏

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>);