使用JavaScript切换CSS类无法设置动画

我有一个移动菜单动画，它是通过Javascript添加一些CSS类触发的（下面的实时代码片段中的简化版本）

我遇到的问题是，尽管菜单正确地设置了动画，但当我关闭它时，它会消失，不会像我预期的那样淡出

我已经在JS中说明了不同阶段的功能，但我似乎无法像CSS动画类所说的那样让它淡出

任何帮助都会令人惊讶

代码笔：

谢谢，艾米丽

var mobileMenuButton=document.querySelector（“.button”）
var mobileMenu=document.querySelector（“.menu”）
//切换移动菜单
var=false
函数切换MOBILEMENU（）{
如果（单击===false）{
//删除下面在语句的“else”部分添加的“display none”类，以便可以多次切换菜单
mobileMenu.classList.remove（“显示无”）
//将“display:none”从样式表更改为“display:flex”`
mobileMenu.classList.add（“显示”）
//删除下面添加的非活动动画
mobileMenu.classList.remove（“MobileMenuActive”）
//添加在中设置菜单动画的菜单活动动画
mobileMenu.classList.add（“mobilementuactive”）
//更改菜单按钮上的单词
mobileenubutton.textContent=“关闭”
单击=真
}否则{
mobileMenu.classList.remove（“MobilementUActive”）
mobileMenu.classList.add（“MobileMenuActive”）
mobileenubutton.textContent=“菜单”
mobileMenu.classList.add（“显示无”）
单击=错误
}
}
MobileNubutton.addEventListener（“单击”，函数（）{
切换MOBILEMENU（）
}，false）

正文{
保证金：0；
填充：0；
显示器：flex；
宽度：100%；
高度：100vh；
证明内容：中心；
对齐项目：居中；
}
.包装纸{
显示器：flex；
对齐项目：居中；
}
.菜单{
显示：无；
对齐项目：居中；
证明内容：中心；
最小宽度：150px；
背景：蓝色；
右：0；
顶部：6rem；
填充：10px 0px；
z指数：99；
宽度：20%；
高度：计算（100vh-10rem）；
颜色：白色
}
.按钮{
保证金：03雷姆；
光标：指针；
填充：10px 20px；
背景：灰色；
颜色：白色；
}
/*添加和删除'display'属性*/
.menu.display{display:flex；}
.menu.display-none{display:none；}
/*动画*/
.menu.MOBILEmentUActive{
动画：showMobileMenu.5s轻松前进；
}
.menu.mobileMenuInactive{
动画：RemoveMobileMou.5s向前放松；
}
@关键帧显示MOBILEMENU{
0%{不透明度：0；}
100%{不透明度：1；}
}
@关键帧移除移动{
0%{不透明度：1；}
100%{不透明度：0；}
}

菜单
点击我

您需要等待500毫秒（动画时间），然后才能将显示设置为无：

setTimeout(function(){
  mobileMenu.classList.add("display-none");  
},500);

---

在淡出动画完成之前，元素似乎被隐藏。可能必须告诉它等待动画完成，然后再将其更改为display-none.JS以最短的路径到达终点。在这种情况下，它忽略了不透明度的变化，因为显示被更改为无。还有一个很好的答案是：这个topicHi@TimHunter，是的，我知道发生了什么，只是我无法找到解决方案。嗨@pmkro，你指给我的另一个问题/答案与我的问题无关。嗨，我在代码笔上编辑了您的代码：，这似乎对我很有用