javascript - 同时设置动画导航菜单下拉菜单

我正在尝试使用subnav为JavaScript设置动画。我想显示所有subnavs，类似于'mega menu'类型的nav。现在，它会逐渐消失，但是会从最远的subnav处产生渐变效果。我希望他们都同时开始。

如何使它们同时动画？

有关HTML和CSS，请参见Codepen

这是JS块：

  nav.forEach(elem => {
    elem.addEventListener('mouseenter', () => {
      const subnav = document.querySelectorAll('.subnav-block');
      subnav.forEach(sub => {
        sub.classList.add('display-block');
        setTimeout(() => {
          sub.style.opacity = 1;
        }, 100);
      });
    });

    elem.addEventListener('mouseleave', () => {
      const subnav = document.querySelectorAll('.subnav-block');
      subnav.forEach(sub => {
        sub.classList.remove('display-block');
        sub.style.opacity = 0;
      });
    });
  });

最佳答案

您的JavaScript没问题。所有子导航都同时进行动画处理：问题在于它们重叠。现在使用CSS，第一个子导航位于其他两个导航之后，第二个在第三个导航之后，如下所示：

[subnav 1 [subnav 2 [subnav 3]]]

您可以使用浏览器的检查元素选项进行验证。

当第二个和第三个子导航变为透明时，您可以看到它们后面的第一个子导航，因此它们显得更暗。您需要更改CSS，以免它们重叠。