Javascript 响应导航转换不工作

我无法轻松过渡到使用导航栏

在手机上，当你点击汉堡时，我想要一个从右向左滑动的简单过渡

我尝试使用translateX（0%，100%）而不是display（无，flex）

我觉得我错过了/忘记了一些非常简单的事情

我做错了什么/忘记了什么

//Js等待运行，直到加载DOM之后
文件。addEventListener（“DOMContentLoaded”，就绪）；
函数就绪（）{
log（'DOM已就绪'）；
切换菜单（）；
}
函数切换菜单（）{
log（“导入并执行脚本”）；
//导航opt4-使用事件监听器和内联样式…-工作，但非常他妈的丑陋的代码和不必要的复杂
const navLinks=document.querySelector（'.nav links'）；
const burgerToggle=document.querySelector（“#burger”）；
burgerToggle.addEventListener（'单击'，显示）；
函数show（）{
burgerToggle.classList.toggle（'toggle'）；
navLinks.classList.toggle（'nav-links\u active'）
}
函数关闭（）{
navLinks.classList.toggle（'nav-links\u closed'）
}
}

*{
框大小：边框框；
}
身体{
保证金：0；
溢出：隐藏；
背景色：黑色；
}
.集装箱{
最大宽度：1368px；
保证金：0自动；
填充：1rem2rem；
}
钮扣{
边界：无；
大纲：无；
光标：指针；
填充：0.75rem 1rem；
保证金：0.1rem；
边界半径：6px；
背景：透明；
边框：2倍纯白；
颜色：白色；
字号：500；
}
* {
字体系列：Helvetica，无衬线；
}
/*链接样式*/
a{
文字装饰：无；
字号：1rem；
}
/*航行*/
navbar先生{
最小高度：10vh；
显示器：flex；
对齐项目：居中；
证明内容：之间的空间；
}
.标志{
字体大小：2.25rem；
颜色：白色；
字号：700；
}
/*导航链接样式*/
.导航链接{
显示器：flex；
对齐项目：居中；
}
.nav链接李{
列表样式类型：无；
}
.导航链接a{
颜色：白色；
保证金：0.1.25雷姆；
位置：相对位置；
}
.导航链接a.激活{
文字装饰：下划线；
字体大小：粗体；
}
@介质（最大宽度：850px）{
.汉堡{
光标：指针；
位置：相对位置；
显示：块！重要；
z指数：11；
字体大小：3rem；
}
.汉堡部{
宽度：25px；
高度：3倍；
背景色：白色；
保证金：5px；
过渡：所有0.3秒缓解；
}
钮扣{
边框颜色：黑色；
颜色：黑色；
填充：0.75雷姆1.5雷姆；
}
.导航链接a{
颜色：黑色；
}
.导航链接{
显示：无；
位置：绝对位置；
排名：0；
左：0；
背景色：白色；
身高：100%；
宽度：100%；
保证金：0；
填充：100px；
弯曲方向：立柱；
对正内容：空间均匀；
对齐项目：居中；
z指数：10；
过渡：0.5s缓进；
}
.导航链接关闭{
显示：无；
}
.nav-links\u激活{
显示器：flex；
}
/*切换样式*/
.toggle.line1{
变换：旋转（-45度）平移（-5px，6px）；
背景色：黑色；
}
.toggle.line2{
不透明度：0；
}
.toggle.line3{
变换：旋转（45度）平移（-5px，-6px）；
背景色：黑色；
}
}

徽标





登录
注册

首先，转换对更改显示属性没有影响。 最好使用transform参数，例如以下示例： 这样就可以实现向下滑动的效果

演示：

//Js等待运行，直到加载DOM之后
文件。addEventListener（“DOMContentLoaded”，就绪）；
函数就绪（）{
log（'DOM已就绪'）；
切换菜单（）；
}
函数切换菜单（）{
log（“导入并执行脚本”）；
//导航opt4-使用事件监听器和内联样式…-工作，但非常他妈的丑陋的代码和不必要的复杂
const navLinks=document.querySelector（'.nav links'）；
const burgerToggle=document.querySelector（“#burger”）；
burgerToggle.addEventListener（'单击'，显示）；
函数show（）{
burgerToggle.classList.toggle（'toggle'）；
navLinks.classList.toggle（'nav-links\u active'）
}
函数关闭（）{
navLinks.classList.toggle（'nav-links\u closed'）
}
}

*{
框大小：边框框；
}
身体{
保证金：0；
溢出：隐藏；
背景色：黑色；
}
.集装箱{
最大宽度：1368px；
保证金：0自动；
填充：1rem2rem；
}
钮扣{
边界：无；
大纲：无；
光标：指针；
填充：0.75rem 1rem；
保证金：0.1rem；
边界半径：6px；
背景：透明；
边框：2倍纯白；
颜色：白色；
字号：500；
}
* {
字体系列：Helvetica，无衬线；
}
/*链接样式*/
a{
文字装饰：无；
字号：1rem；
}
/*航行*/
navbar先生{
最小高度：10vh；
显示器：flex；
对齐项目：居中；
证明内容：之间的空间；
}
.标志{
字体大小：2.25rem；
颜色：白色；
字号：700；
}
/*导航链接样式*/
.导航链接{
显示器：flex；
对齐项目：居中；
}
.nav链接李{
列表样式类型：无；
}
.导航链接a{
颜色：白色；
保证金：0.1.25雷姆；
位置：相对位置；
}
.导航链接a.激活{
文字装饰：下划线；
字体大小：粗体；
}
@介质（最大宽度：3000px）{
.汉堡{
光标：指针；
位置：相对位置；
显示：块！重要；
z指数：11；
字体大小：3rem；
}
.汉堡部{
宽度：25px；
高度：3倍；
背景色：白色；
保证金：5px；
过渡：所有0.3秒缓解；
}
钮扣{
边框颜色：黑色；
颜色：黑色；
填充：0.75雷姆1.5雷姆；
}
.导航-