怪异的移动导航动画bug

Question

CodePen of the nav

在与移动导航的第一次互动中，它将按预期打开和关闭，但之后的任何内容都会出现错误。它将立即开始打开和关闭，或者链接将显示为奇怪的订单。

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

现在我没有为反向实现逻辑，但我需要在开始之前解决这个问题。

段

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>

注意

• 我认为问题是if事件处理程序中的第一个bars语句。有关等待transitionend事件的方式，但startNavAnimation未被调用。

Answer 1

有两个问题。

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

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

我喜欢使用类，并且您的代码显示您也这样做，因此您可能希望拥有一个开放状态类和一个可见性类。