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

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

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

汉堡图标有三行，中间的一行没有对齐

请参阅下面的代码：

const menuBtn=document.querySelector（'.menu btn'）；
设menuOpen=false；
menuBtn.addEventListener（'单击'，（）=>{
如果（！menuOpen）{
menuBtn.classList.add（'open'）；
menuOpen=true；
}否则{
menuBtn.classList.remove（'open'）；
MENOOPEN=假；
}
});
*{
保证金：0；
填充：0；
框大小：边框框；
}
身体{
背景:#2727；
显示器：flex；
证明内容：中心；
对齐项目：居中；
最小高度：100vh；
}
.菜单btn{
位置：相对位置；
显示器：flex；
证明内容：中心；
对齐项目：居中；
宽度：80px；
高度：80px；
光标：指针；
过渡：全部。5s轻松进出；
转换：translateX（0px）；
内容：''；
/*边框：3px实心#fff*/
}
.menu-btn___汉堡{
宽度：50px；
高度：6px；
背景：#fff；
边界半径：5px；
盒影：0 2px 5px rgba（255101,47,2）；
过渡：全部。5s轻松进出；
}
.menu-btn_uuu汉堡：：之前，
.menu-btn\uuuu汉堡：：之后{
内容：''；
位置：绝对位置；
宽度：50px；
高度：6px；
背景：#fff；
边界半径：5px；
盒影：0 2px 5px rgba（255101,47,2）；
过渡：全部。5s轻松进出；
转换：translateX（-50px）；
}
.menu-btn\uuuu汉堡：：之前{
变换：旋转（45度）平移（35px，-35px）；
}
.menu-btn\uuuu汉堡：：之后{
变换：旋转（-45度）平移（35px，35px）；
}
/*动画*/
.menu-btn.open.menu-btn\uu汉堡{
转换：translateX（0px）；
背景：透明；
盒影：无；
}
.menu-btn.open.menu-btn\uuu汉堡：：之前{
转换：translateY（16px）；
}
.menu-btn.open.menu-btn\uuu汉堡：：之后{
转换：translateY（-16px）；
}

汉堡包动画
您反转了
CSS代码。当添加
.open
类时，关闭汉堡图标将设置动画。
关闭图标的位置不正确


const menuBtn=document.querySelector（'.menu btn'）；
设menuOpen=false；
menuBtn.addEventListener（'单击'，（）=>{
如果（！menuOpen）{
menuBtn.classList.add（'open'）；
menuOpen=true；
}否则{
menuBtn.classList.remove（'open'）；
MENOOPEN=假；
}
});
*{
保证金：0；
填充：0；
框大小：边框框；
}
身体{
背景:#2727；
显示器：flex；
证明内容：中心；
对齐项目：居中；
最小高度：100vh；
}
.菜单btn{
位置：相对位置；
显示器：flex；
证明内容：中心；
对齐项目：居中；
宽度：80px；
高度：80px；
光标：指针；
过渡：全部。5s轻松进出；
转换：translateX（-50px）；
/*边框：3px实心#fff*/
}
.menu-btn___汉堡{
宽度：50px；
高度：6px；
背景：#fff；
边界半径：5px；
盒影：0 2px 5px rgba（255101,47,2）；
过渡：全部。5s轻松进出；
位置：相对位置；
}
.menu-btn_uuu汉堡：：之前，
.menu-btn\uuuu汉堡：：之后{
内容：''；
位置：绝对位置；
宽度：50px；
高度：6px；
背景：#fff；
边界半径：5px；
盒影：0 2px 5px rgba（255101,47,2）；
过渡：全部。5s轻松进出；
转换：translateX（-50px）；
排名：0；
左：0；
}
/*动画*/
.menu btn.menu-btn\uuu汉堡{
转换：translateX（0px）；
背景：#fff；
盒影：无；
}
.menu btn.menu-btn\uuuu汉堡：：之前{
转换：translateY（16px）；
}
.menu btn.menu-btn\uuu汉堡：：之后{
转换：translateY（-16px）；
}
.menu-btn.open.menu-btn\uu汉堡{
背景：透明；
}
.menu-btn.open.menu-btn\uu汉堡：：之前，
.menu-btn.open.menu-btn\uuu汉堡：：之后{
左：-50px；
}
.menu-btn.open.menu-btn\uuu汉堡：：之前{
变换：旋转（45度）平移（35px，-35px）；
}
.menu-btn.open.menu-btn\uuu汉堡：：之后{
变换：旋转（-45度）平移（35px，35px）；
}

汉堡包动画
如果你的意思是，你的中间线在闭合时消失，而在打开时出现在一边，那么我这里有小提琴

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

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

实际上我想要的是相反的，当点击汉堡按钮时，它会向前移动50像素，反之亦然。