javascript - 奇怪的移动导航动画错误

Question

CodePen of the nav

在与移动导航的第一次交互中，它会按预期打开和关闭，但之后的任何操作都会出现错误。它将立即开始打开和关闭，否则链接将显示为奇怪的命令。

我需要的是移动导航首先从右到左打开，让每个链接级联到 View 中，从关于一直到博客，然后我希望它在离开时反转查看。

现在我还没有实现反向逻辑，但我需要先解决这个错误。

片段

const bars = document.querySelector('.fa-bars');

bars.addEventListener('click', () => {
  const navItemsContainer = document.querySelector('.navbar__links-container');
  const navItems = document.querySelectorAll('.navbar__links-container__item');
  
  const sleep = ms => {
    return new Promise(resolve => {
      setTimeout(() => {
        return resolve();
      }, ms);
    });
  };
  
  const startNavAnimation = async () => {
    let count = 0;
    
    for (let item of navItems) {
      if (item.classList.contains('navbar__links-container__item--show')) {
        setTimeout(() => {
          item.style.transitionDelay = `${ count }s`
          item.classList.remove('navbar__links-container__item--show');
          count += .15;
        }, count);
      }
      else {
        item.style.transitionDelay = `${ count }s`
        item.classList.add('navbar__links-container__item--show');
        count += .15;
      }
    }
  };
  
  if (navItemsContainer.classList.contains('navbar__links-container--open')) {
    navItems[ navItems.length - 1 ].addEventListener('transitionend', () => {
      navItemsContainer.classList.remove('navbar__links-container--open');
    });
  }
  else {
    navItemsContainer.classList.add('navbar__links-container--open');
  }
  
  startNavAnimation();
});

body {
  margin: 0;
}

.navbar {
  background: #f2f2f2;
  display: flex;
  flex-wrap: wrap;
}

.navbar__mobile-container {
  display: flex;
  justify-content: space-around;
  width: 100%;
}

.fa-bars {
  cursor: pointer;
}

.navbar__links-container {
  background: inherit;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  list-style: none;
  margin: 0;
  overflow: hidden;
  padding: 0;
  position: absolute;
  top: 20px;
  left: 100%;
  transition: left .25s, width .25s;
  width: 0%;
}

.navbar__links-container__item {
  left: 52px;
  margin-bottom: 1rem;
  position: relative;
  transition: left .25s;
  width: auto;
}

.navbar__links-container--open {
  left: 0;
  width: 100%;
}

.navbar__links-container__item--show {
  left: -63px;
}

    <nav class="navbar">
      <div class="navbar__mobile-container">
        <div class="navbar__logo-container">
          <a class="navbar__logo-container__logo">BB</a>
        </div>
        
        <div class="navbar__hamburger-container">
          <i class="fas fa-bars">MENU</i>
        </div>
      </div>

      <ul class="navbar__links-container">
        <li class="navbar__links-container__item">
          <a class="navbar__links-container__item__link">About</a>
        </li>
        <li class="navbar__links-container__item">
          <a class="navbar__links-container__item__link">Portfolio</a>
        </li>
        <li class="navbar__links-container__item">
          <a class="navbar__links-container__item__link">Blog</a>
        </li>
      </ul>
</nav>

注意事项

• 我认为问题出在 bars 事件处理程序中的第一个 if 语句。关于它等待 transitionend 事件但尚未调用 startNavAnimation 的方式。

Answer 1

有两个问题。

• 一个是您要在点击事件监听器中添加一个新的事件监听器。我把它移到了外面。
• 第二个问题是 --open 类将在菜单打开或关闭时出现，因此您需要另一种方法来测试打开或关闭状态。为了让 Codepen 清晰易懂，我只使用了一个 isOpen 标志。

https://codepen.io/Jason_B/pen/jzGwQX?editors=0010

我喜欢为此使用类，并且您的代码显示您也这样做，因此您可能想要一个用于打开状态的类和一个用于可见性的类。