javascript - 通过设置 width=0 隐藏容器，但有时容器内的一些元素在容器隐藏后会短暂地保持可见

Question

抱歉，FPS 有点粗糙，但基本上我已经为我的网络应用程序的一些设置创建了一个侧面板

我通过设置容器元素的宽度来打开和关闭它

document.getElementById("theSidePanel").style.width = "50vw";

和

document.getElementById("theSidePanel").style.width = "0";

如果你仔细观察，当面板关闭时，面板上的一些控件会保持可见一秒钟，然后在侧面板已经关闭后消失

我希望这与通过设置宽度关闭面板有关，有更好的方法吗？

否则它将成为代码中其他地方的错误，这将更难解决(如果有人有想法，我洗耳恭听)

Answer 1

由于浏览器正在将宽度减小到 1(我假设上面有 CSS 过渡)，它会在 div 缩小和缩小时重复重新绘制和重新渲染内部，这可能导致错误。

如果 div 是绝对的或固定位置的，为什么不尝试保持宽度不变，并将 left 属性修改为 div 的负宽度，并添加到 的过渡left 让它动起来？这将复制所需的效果，但不会强制浏览器不断重新呈现 div 的内容。