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

Question

我正在尝试使用 JavaScript 为我的 subnav 设置动画。我想显示所有 subnavs，类似于“大型菜单”类型的导航。现在，它淡入，但从最右边的 subnav 淡入，产生渐变效果。我希望它们全部同时开始。

我怎样才能让它们同时具有动画效果？

参见Codepen用于 HTML 和 CSS

这是 JS block :

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

Answer 1

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

[子导航 1 [子导航 2 [子导航 3]]]

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

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