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”事件执行代码。您必须添加一个布尔值来检查过渡是隐藏可见的还是可见隐藏的

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

JavaScript帮助菜单

1 个答案: