CSS动画在通过Javascript添加时不起作用

我想做一个汉堡图标按钮。 当你点击它时，顶部和底部的线条应该向左移动，中间的线条应该消失，但是当我点击它时，什么也没有发生。我已经在浏览器中打开了JavaScript，但这不起作用。我以为是代码编辑器，所以我下载了atom（我通常使用VS代码），但那也不起作用

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轻松进出；
边框：3倍实心#fff
}
.menu-btn___汉堡{
宽度：50px；
高度：6px；
背景：#fff；
边界半径：5px；
盒影：0 2px 5px rgb（255,101,47,2）；
过渡：全部。5s轻松进出；
}
.menu-btn_uuu汉堡：：之前，
.menu-btn\uuuu汉堡：：之后{
内容：''；
位置：绝对位置；
宽度：50px；
高度：6px；
背景：#fff；
边界半径：5px；
盒影：0 2px 5px rgba（255201,47,2）；
过渡：全部。5s轻松进出；
}
.menu-btn\uuuu汉堡：：之前{
转换：translateY（-16px）；
}
.menu-btn\uuuu汉堡：：之后{
转换：translateY（16px）；
}
/*动画*/
.menu-btn.open.menu-btn\uu汉堡{
转换：translateX（-50px）；
背景：透明；
盒影：无；
}
它工作正常。。。但你可以用一条线把它缩短：


const menuBtn=document.querySelector（'.menu btn'）；
设menuOpen=false；
menuBtn.addEventListener（'单击'，（）=>{
menuBtn.classList.toggle（“打开”，menuOpen=！menuOpen）
});
*{
保证金：0；
填充：0；
框大小：边框框
}
身体{
背景:#2727；
显示器：flex；
证明内容：中心；
对齐项目：居中；
最小高度：100vh；
}
.菜单btn{
位置：相对位置；
显示器：flex；
证明内容：中心；
对齐项目：居中；
宽度：80px；
高度：80px；
光标：指针；
过渡：全部。5s轻松进出；
边框：3倍实心#fff
}
.menu-btn___汉堡{
宽度：50px；
高度：6px；
背景：#fff；
边界半径：5px；
盒影：0 2px 5px rgb（255,101,47,2）；
过渡：全部。5s轻松进出；
}
.menu-btn.open
{
背景颜色：绿色；
}

汉堡包动画
您的代码已经很好了。它工作得很好。可能您忘记刷新窗口：）

另外，如果您还不知道，可以使用
elem.classList.toggle（“class”）
而不是
if-else
条件


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

汉堡包动画
您可以只使用
菜单项.classList.toggle（“打开”）
而不用if-else条件。您的代码对我来说很有用。单击时控制台是否显示错误？我刚刚编辑了您的问题并添加了一个代码段，代码运行良好，我同意@s.kuznetsov。粘贴到CodePen上，它会按照您所描述的那样执行。@s.kuznetsov所以我的电脑一定出了问题？因为这不是我第一次遇到这样的问题。My document.querySelector（）也无法工作