在 css 中导航侧边菜单汉堡图标时的设计问题答案

【问题标题】：Design issue when navigating side menu hamburger icon in css在 css 中导航侧边菜单汉堡图标时的设计问题
【发布时间】：2021-08-06 15:28:01
【问题描述】：

我的侧边菜单一直打开，当它打开时，我显示关闭按钮，但按钮不正确。

当我的侧边菜单关闭时也会发生同样的情况，而该菜单又会显示汉堡包图标，该按钮也不正确。

汉堡图标有三行，中间的行错位了。

参考以下代码： Icon transition issue

    const menuBtn = document.querySelector('.menu-btn');
    let menuOpen = false;
    menuBtn.addEventListener('click', () => {
      if(!menuOpen) {
        menuBtn.classList.add('open');
        menuOpen = true;
      } else {
        menuBtn.classList.remove('open');
        menuOpen = false;
      }
    });

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    body {
      background: #272727;
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
    }
    .menu-btn {
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 80px;
      height: 80px;
      cursor: pointer;
      transition: all .5s ease-in-out;
      transform: translateX(0px);
      content: '';
      /* border: 3px solid #fff; */
    }
    .menu-btn__burger {
      width: 50px;
      height: 6px;
      background: #fff;
      border-radius: 5px;
      box-shadow: 0 2px 5px rgba(255,101,47,.2);
      transition: all .5s ease-in-out;
    }
    .menu-btn__burger::before,
    .menu-btn__burger::after {
      content: '';
      position: absolute;
      width: 50px;
      height: 6px;
      background: #fff;
      border-radius: 5px;
      box-shadow: 0 2px 5px rgba(255,101,47,.2);
      transition: all .5s ease-in-out;
     transform: translateX(-50px);
    }
    .menu-btn__burger::before {
      transform: rotate(45deg) translate(35px, -35px);
    }
    .menu-btn__burger::after {
      transform: rotate(-45deg) translate(35px, 35px);
    }
    /* ANIMATION */
    .menu-btn.open .menu-btn__burger {
      transform: translateX(0px);
      background: transparent;
      box-shadow: none;
    }
    .menu-btn.open .menu-btn__burger::before {
        transform: translateY(16px);
    }
    .menu-btn.open .menu-btn__burger::after {
        transform: translateY(-16px);
    }

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>CSS Hamburger Animation</title>
      <link rel="stylesheet" href="style.css">
    </head>
    <body>
      <div class="menu-btn">
        <div class="menu-btn__burger"></div>
      </div>
      <script src="main.js"></script>
    </body>
    </html>

【问题讨论】：

标签： javascript html css reactjs sass

【解决方案1】：

您撤消了您的CSS code。当添加.open 类时，关闭汉堡图标将被动画化。而且Close icon的位置不正确。

const menuBtn = document.querySelector('.menu-btn');
let menuOpen = false;
menuBtn.addEventListener('click', () => {
  if(!menuOpen) {
    menuBtn.classList.add('open');
    menuOpen = true;
  } else {
    menuBtn.classList.remove('open');
    menuOpen = false;
  }
});

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  background: #272727;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}
.menu-btn {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 80px;
  height: 80px;
  cursor: pointer;
  transition: all .5s ease-in-out;
  transform: translateX(-50px);
  /* border: 3px solid #fff; */
}
.menu-btn__burger {
  width: 50px;
  height: 6px;
  background: #fff;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(255,101,47,.2);
  transition: all .5s ease-in-out;
    position: relative;
}
.menu-btn__burger::before,
.menu-btn__burger::after {
  content: '';
  position: absolute;
  width: 50px;
  height: 6px;
  background: #fff;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(255,101,47,.2);
  transition: all .5s ease-in-out;
 transform: translateX(-50px);
 top: 0;
 left: 0;
}
/* ANIMATION */
.menu-btn .menu-btn__burger {
  transform: translateX(0px);
  background: #fff;
  box-shadow: none;
}
.menu-btn .menu-btn__burger::before {
    transform: translateY(16px);
}
.menu-btn .menu-btn__burger::after {
    transform: translateY(-16px);
}

.menu-btn.open .menu-btn__burger {
  background: transparent;
}

.menu-btn.open .menu-btn__burger::before,
.menu-btn.open .menu-btn__burger::after {
    left: -50px;
}
.menu-btn.open .menu-btn__burger::before {
  transform: rotate(45deg) translate(35px, -35px);
}
.menu-btn.open .menu-btn__burger::after {
  transform: rotate(-45deg) translate(35px, 35px);
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS Hamburger Animation</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="menu-btn">
    <div class="menu-btn__burger"></div>
  </div>
  <script src="main.js"></script>
</body>
</html>

【讨论】：

我其实想要相反的。

【解决方案2】：

如果你的意思是你在关闭时中间线消失，打开时出现在一边的问题，我在这里有小提琴https://jsfiddle.net/nickberliner1/cLt8h3aj/3/。

中间线的背景在关闭时是透明的，而不是在打开时。

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  background: #272727;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}
.menu-btn {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 80px;
  height: 80px;
  cursor: pointer;
  transition: all .5s ease-in-out;
  transform: translateX(-50px);
  /* border: 3px solid #fff; */
}
.menu-btn__burger {
  width: 50px;
  height: 6px;
  background: transparent;
  border-radius: 5px;
  transition: all .5s ease-in-out;
}
.menu-btn__burger::before,
.menu-btn__burger::after {
  content: '';
  position: absolute;
  width: 50px;
  height: 6px;
  background: #fff;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(255,101,47,.2);
  transition: all .5s ease-in-out;
 transform: translateX(-50px);
}
.menu-btn__burger::before {
  transform: rotate(45deg) translate(35px, -35px);
}
.menu-btn__burger::after {
  transform: rotate(-45deg) translate(35px, 35px);
}
/* ANIMATION */
.menu-btn.open .menu-btn__burger {
  transform: translateX(0px);
  background: white;
  box-shadow: 0 2px 5px rgba(255,101,47,.2);
}
.menu-btn.open .menu-btn__burger::before {
    transform: translateY(16px);
}
.menu-btn.open .menu-btn__burger::after {
    transform: translateY(-16px);
}

【讨论】：

点击汉堡按钮时它向前移动 50px，反之亦然。