Jquery CSS转换的问题

我正在尝试创建一个简单的滑入和滑出菜单，使用CSS转换实现平滑效果。根据窗口的大小，菜单从左侧移动到屏幕顶部

它工作得很好，但是当菜单打开时，我将浏览器窗口从大调整到小。当菜单自行调整大小时，会产生一种奇怪的效果

我一辈子都想不出如何摆脱它，或者我做错了什么

$（“#菜单按钮”）。单击（函数（）{
$（“#菜单”）.toggleClass（'closed'）；
});
#包装器{
显示：网格；
网格模板列：自动1fr；
高度：100vh；
背景：#eeeeee；
}
#菜单包装器{
网格柱：1；
右边框：1px实心#4444；
}
#菜单{
宽度：300px；
过渡：宽度1s；
}
#菜单关闭{
宽度：50px；
}
#菜单按钮{
宽度：50px；
高度：50px；
浮动：对；
}
.酒吧{
宽度：35px；
高度：5px；
背景色：#333；
利润率：6px0；
}
#内容包装器{
网格柱2；
}
@全部和全部介质（最大宽度：900px）{
#包装纸{
网格模板列：1fr；
网格模板行：自动100%；
}
#菜单包装器{
网格行：1；
网格柱：1；
边框底部：1px实心；
边界权：无；
}
#菜单{
宽度：100%；
高度：100px；
过渡：高度1s；
}
#菜单关闭{
高度：50px；
}
#内容包装器{
网格柱：1；
网格行：2；
}
}
将边框移动到内部元素（应用转换的位置）以避免出现问题，然后调整一些CSS：


$（“#菜单按钮”）。单击（函数（）{
$（“#菜单”）.toggleClass（'closed'）；
});
#包装器{
显示：网格；
网格模板列：自动1fr；
高度：100vh；
背景：#eeeeee；
}
#菜单包装器{
网格柱：1；
}
#菜单{
宽度：300px；
高度：100%；/*已添加*/
过渡：宽度1s；
右边框：1px实心#444444；/*已添加*/
}
#菜单关闭{
宽度：50px；
}
#菜单按钮{
宽度：50px；
高度：50px；
浮动：对；
}
.酒吧{
宽度：35px；
高度：5px；
背景色：#333；
利润率：6px0；
}
#内容包装器{
网格柱2；
}
@全部和全部介质（最大宽度：900px）{
#包装纸{
网格模板列：1fr；
网格模板行：自动100%；
}
#菜单包装器{
网格行：1；
网格柱：1；
边界权：无；
}
#菜单{
宽度：100%；
高度：100px；
右边框：无；/*已添加*/
边框底部：1px实心；/*已添加*/
过渡：高度1s；
}
#菜单关闭{
高度：50px；
宽度：100%；/*已添加*/
}
#内容包装器{
网格柱：1；
网格行：2；
}
}

你能描述一下这种奇怪的效果吗？@Temaniaf如果是这样，当菜单打开时。如果从小到大调整窗口大小。菜单使用转换来调整大小，但边框不会随之移动。所以你可以看到按钮在屏幕上滑动。只有当它停止时，边界才会移动到内部元素。。。我认为你可以在你的预算中减少一个divcode@TemaniAfif我无法更改正在生成的div的数量。但是边界的改变解决了这个问题。谢谢你。加一个答案，我就接受