Html 在消失前调整视口大小时，将显示纯CSS汉堡菜单

我有一个基于此的纯css汉堡包菜单，我使我的汉堡包菜单仅在宽度小于等于768px的设备上显示，汉堡包菜单在打开和关闭时也有一些过渡，使其看起来平滑，但问题是当页面刷新时，您可以看到菜单在标题下转换之前显示一秒钟。当您从大于

768px

的宽度手动调整视口的大小时，也可以看到这一点；当它到达

767px

时，您可以看到菜单在消失前的一瞬间出现。请让我停止这种行为。以下是重新创建此问题所需的代码：

*，
*：：之前，
*：：之后{
框大小：边框框；
}
html，
身体{
保证金：0；
填充：0；
最小宽度：适合的内容；
}
身体{
字体系列：“蒙特塞拉特”，无衬线；
背景色：#eeeeee；
}
标题{
宽度：100%；
背景色：#eeeeee；
填充：0 20px；
高度：65px；
位置：固定；
排名：0；
}
.标志{
宽度：100%；
显示器：flex；
对齐项目：居中；
证明内容：中心；
边缘顶部：15px；
}
#收割台img{
宽度：100%；
身高：100%；
最大宽度：300px；
}
/*航行*/
导航{
宽度：100%；
文本对齐：居中；
}
/*汉堡菜单按钮*/
.菜单btn{
显示：无；
}
.菜单图标{
显示：内联块；
位置：相对位置；
顶部：-42px；
左：-25px；
光标：指针；
填充：24px 14px；
z指数：1；
}
纳维孔先生{
背景色：#22222；
显示：块；
高度：3倍；
宽度：26px；
位置：相对位置；
过渡：0.3192s缓进缓出；
}
.纳维孔：之前，
.纳维孔：之后{
内容：“；
显示：块；
身高：100%；
宽度：100%；
位置：绝对位置；
背景色：#22222；
过渡：0.3192s缓进缓出；
}
.纳维孔：之前{
顶部：9px；
}
.纳维孔：之后{
底部：9px；
}
/*汉堡菜单动画开始*/
.menu btn:选中~.menu图标。navicon:之前{
变换：旋转（-45度）；
排名：0；
}
.menu btn:选中~.menu图标。navicon:之后{
变换：旋转（45度）；
底部：0；
}
.menu btn:选中~.menu图标.navicon{
背景：透明；
过渡：0.3192s缓进缓出；
}
/*在汉堡菜单上隐藏蓝色背景在某些移动设备上点击*/
.菜单图标，
.菜单btn，
纳维孔先生{
-webkit点击突出显示颜色：透明；
}
/*导航项目*/
.菜单{
背景色：#eeeeee；
宽度：100%；
高度：自动；
列表样式类型：无；
位置：绝对位置；
排名：0；
左：0；
右：0；
边缘顶部：65px；
填充：0；
可见性：隐藏；
不透明度：0；
过渡：可见性0.3192s缓进缓出，不透明度0.3192s缓进缓出；
}
.菜单btn：选中导航菜单{
能见度：可见；
不透明度：1；
过渡：可见性0.3192s缓进缓出，不透明度0.3192s缓进缓出；
}
李先生{
边框顶部：1px实心#c7c7c7；
填充：10px0；
不透明度：0；
过渡：0.5s；
}
.菜单a{
颜色：#22222；
文字装饰：无；
字号：500；
字体大小：0.9rem；
不透明度：0；
过渡：0.5s；
}
.菜单btn：选中导航菜单a，
.菜单btn:选中~导航菜单li{
不透明度：1；
过渡：0.3192s缓进缓出；
}
/*中型设备（横向平板电脑、768px及以上）*/
@仅介质屏幕和（最小宽度：768px）{
标题{
显示器：flex；
对齐项目：居中；
证明内容：周围的空间；
}
.标志{
宽度：60vw；
边际上限：0；
调整内容：灵活启动；
}
.菜单图标{
显示：无；
}
导航{
宽度：40vw；
边际上限：0；
}
.菜单{
宽度：100%；
转化：无；
过渡：无；
位置：静态；
保证金：0；
能见度：可见；
不透明度：1；
显示器：flex；
证明内容：周围的空间；
对齐项目：居中；
}
李先生{
边界：无；
填充：0；
不透明度：1；
过渡：无；
}
.菜单a{
不透明度：1；
过渡：无；
}
}

产品登录页

使用javascript，我们可以将

停止转换

类添加到主体中几毫秒。然后，在css中，我们可以添加规则来暂时停止播放任何转换。之后，当调整大小完成后，我们可以从主体中删除

stop transition

类，以确保所有操作都相应地进行

这是我的建议

（函数（）{
常量类=document.body.classList；
设定时器为空；
window.addEventListener（'resize'，函数（）{
中频（定时器）{
清除超时（计时器）；
定时器=空；
}否则{
添加（“停止转换”）；
}
计时器=设置超时（（）=>{
类。删除（“停止转换”）；
定时器=空；
}, 100);
});
})();
*，
*：：之前，
*：：之后{
框大小：边框框；
}
html，
身体{
保证金：0；
填充：0；
最小宽度：适合的内容；
}
身体{
字体系列：“蒙特塞拉特”，无衬线；
背景色：#eeeeee；
}
/*在视口调整大小时暂时停止播放过渡*/
body.stop-transition.menu{
过渡：无；
}
标题{
宽度：100%；
背景色：#eeeeee；
填充：0 20px；
高度：65px；
位置：固定；
排名：0；
}
.标志{
宽度：100%；
显示器：flex；
对齐项目：居中；
证明内容：中心；
边缘顶部：15px；
}
#收割台img{
宽度：100%；
身高：100%；
最大宽度：300px；
}
/*航行*/
导航{
宽度：100%；
文本对齐：居中；
}
/*汉堡菜单按钮*/
.菜单btn{
显示：无；
}
.菜单图标{
显示：内联块；
位置：相对位置；
顶部：-42px；
左：-25px；
光标：指针；
填充：24px 14px；
z指数：1；
}
纳维孔先生{
背景色：#22222；
显示：块；
高度：3倍；
宽度：26px；
位置：相对位置；
过渡：0.3192s缓进