Javascript 点击汉堡菜单后看不到我的文字
我有三个文件index.html、style.css和app.js 正在尝试制作响应性强的布局 我已经在CSS文件.nav link li下将不透明度设置为0。 当我点击要设置动画的汉堡图标文本时，即文本的不透明度应从0变为1（检查@keframe navLinkFade），然后文本将出现但这不会发生。为什么 我已经在app.js中正确调用了所有函数，我想请看一下 当我在CSS中将不透明度设为1时，效果很好，但这并没有给我淡入淡出的效果 单击汉堡菜单前的图像： 点击汉堡菜单后的图像 index.htmlJavascript 点击汉堡菜单后看不到我的文字,javascript,html,css,visual-studio-code,dom-events,Javascript,Html,Css,Visual Studio Code,Dom Events,我有三个文件index.html、style.css和app.js 正在尝试制作响应性强的布局 我已经在CSS文件.nav link li下将不透明度设置为0。 当我点击要设置动画的汉堡图标文本时，即文本的不透明度应从0变为1（检查@keframe navLinkFade），然后文本将出现但这不会发生。为什么 我已经在app.js中正确调用了所有函数，我想请看一下 当我在CSS中将不透明度设为1时，效果很好，但这并没有给我淡入淡出的效果 单击汉堡菜单前的图像： 点击汉堡菜单后的图像 inde
const导航幻灯片=（）=>{
const burger=document.querySelector（“.burger”）；
const nav=document.querySelector（“.nav links”）；
const navLinks=document.queryselectoral（“.nav links li”）；
burger.addEventListener（“单击”，（）=>{
nav.classList.toggle（“nav avctive”）；
navLinks.forEach（（链接，索引）=>{
if（link.style.animation）{
link.style.animation=“”；
}否则{
link.style.animation=“navLinkFade 0.5s轻松转发${index/7}s”；
}
});
});
};
导航幻灯片（）
*{
边际：0px；
填充：0px；
框大小：边框框；
}
导航{
显示器：flex；
证明内容：周围的空间；
对齐项目：居中；
最小高度：8vh；
字体系列：“罂粟花”，无衬线；
背景色：黑色；
}
.标志{
颜色：白烟；
文本转换：大写；
字母间距：5px；
字体大小：20px；
}
.导航链接{
显示器：flex；
证明内容：周围的空间；
宽度：30%；
}
.nav链接李{
列表样式：无；
}
.导航链接a{
颜色：rgb（240,172,0）；
文字装饰：无；
字母间距：3px；
字体大小：粗体；
字体大小：14px；
}
.汉堡{
显示：无；
}
.汉堡部{
背景色：白烟；
高度：3倍；
宽度：25px；
保证金：5px；
光标：指针；
}
@媒体屏幕和屏幕（最大宽度：1024px）{
.导航链接{
宽度：60%；
}
}
@媒体屏幕和屏幕（最大宽度：768px）{
身体{
溢出x：隐藏；
}
.导航链接{
位置：绝对位置；
右：0px；
高度：92vh；
顶部：8vh；
背景色：黑色；
显示器：flex；
弯曲方向：立柱；
对齐项目：居中；
宽度：50%；
转化：translateX（100%）；
过渡：0.5s轻松过渡；
}
.nav链接李{
不透明度：0；
}
.汉堡{
显示：块；
}
}
导航avtive{
转化：translateX（0%）；
}
@关键帧navLinkFade{
从{
不透明度：0；
转换：translateX（50px）；
}
到{
不透明度：1；
转换：translateX（0px）；
}
}
文件
导航
link.style.animation=“navLinkFade 0.5s轻松转发${index/7}s”动画字符串不会被插值，因为您使用的是双引号，您需要使用反勾号：导航链接li
不透明度：0@media screen and (max-width: 768px)
.nav-links li {
opacity: 1;
}
link.style.animation = `navLinkFade 0.5s ease forwards ${index / 7}s`
只需将双引号改为倒勾
link.style.animation = `navLinkFade 0.5s ease forwards ${index / 7}s`;
尝试使用
可见性：隐藏可见性：可见不透明度或者类似于
可见性不透明度li.nav-links li{opacity:0；transition:all 2s ease；}.nav-links.nav-avctive li{opacity:1；}