如何设置导航按钮的动画以使用JavaScript执行分配给它的正确动画？

这就是我所拥有的，我可以找出为什么我的burger div（移动设备上的导航按钮）无法动画化为X，有人能解释我遗漏了什么或做错了什么吗？ 我尝试过使用javaScript切换来更改类名，但它没有将行设置为45度的动画，我不确定这是为什么？ 我想知道我能做些什么来改变burger（导航按钮）以形成一个X，并通过使用javaScript淡出中心线来隐藏它

这也是我第一次使用堆栈溢出来提问，所以请对我放松

const导航幻灯片=（）=>{
const burger=document.querySelector（'.burger'）；
const nav=document.querySelector（“.nav items”）；
const navItems=document.queryselectoral（'.nav items li'）；
burger.addEventListener（'click'，（）=>{
//导航开关
nav.classList.toggle（'nav-active'）；
//项目动画
navItems.forEach（（项目，索引）=>{
if（item.style.animation）{
item.style.animation=''；
}否则{
item.style.animation=`navItemFade 0.5s轻松转发${index/7+.3}s`；
}
});
//汉堡动画
burger.classList.toggle（'tip'）；
});
}
导航幻灯片（）
*{
框大小：边框框；
保证金：0；
填充：0；
}
html{
滚动行为：平滑；
}
a{
文字装饰：无；
颜色：rgb（245245245245）；
过渡：.3s；
}
/*导航*/
导航{
显示器：flex；
证明内容：之间的空间；
对齐项目：居中；
最小高度：11vh；
字体系列：“Poppins”，无衬线；
背景色：rgb（255,145,0）；
}
.标志{
左侧边缘：3rem；
}
.logo>a>h1{
颜色：rgb（245245245245）；
字母间距：3px；
文本转换：大写；
字体大小：32px；
}
.导航项目{
显示器：flex；
对齐项目：居中；
列表样式类型：无；
保证金权利：25雷姆；
}
.nav项目>li{
填充：1.5雷姆；
}
.导航项目>li>a{
字体大小：16px；
}
.nav项目>li>a:悬停{
颜色：rgb（0,0,0）；
}
.导航图标{
显示器：flex；
右边距：2em；
}
.nav fas{
保证金：1rem；
光标：指针；
}
.汉堡{
显示：无；
左边距：1 em；
}
.burger>div{
宽度：25px；
高度：3倍；
背景色：rgb（0,0,0）；
保证金：5px；
过渡：所有0.3秒缓解；
}
/*移动导航*/
@媒体屏幕和屏幕（最大宽度：1240px）{
.导航项目{
右边距：10px；
过渡：.3s；
}
}
@媒体屏幕和屏幕（最大宽度：860像素）{
身体{
溢出x：隐藏；
}
.导航项目{
宽度：100%；
最大宽度：300px；
显示器：flex；
弯曲方向：立柱；
对正内容：空间均匀；
位置：绝对位置；
高度：90vh；
顶部：14vh；
背景色：rgb（255,145,0）；
转化：translateX（-100%）；
过渡：0.5s轻松过渡；
}
.导航项目李{
不透明度：0；
}
.汉堡{
显示：块；
光标：指针；
}
#fas1，
#fas2{
显示：无；
}
}
.导航激活{
转化：translateX（0%）；
}
@关键帧navItemFade{
从{
不透明度：0；
转换：translateX（50px）；
}
到{
不透明度：1；
转换：translateX（0px）；
}
}
.提示.第1行{
变换：旋转（-45度）平移（-5px，6px）；
}
.提示.线路2{
不透明度：0；
}
.提示.第3行{
变换：旋转（45度）平移（-5px，-6px）；
}

电子商店






一切正常。你只犯了一个简单的拼写错误，你用class
line1，line2，line3在三个div上写了
clsss
，而不是
class

PS:-看起来您对web开发还是新手。给你的一条建议是，使用文本编辑器（无论你可能使用什么）来检测小的拼写错误和其他线头错误。这将为您节省大量时间。
非常感谢！谢谢你的建议，我一定会利用我的编辑来检查拼写错误