显示：无停止初始 translate3d 动画答案

【问题标题】：display:none stopping initial translate3d animation显示：无停止初始 translate3d 动画
【发布时间】：2013-12-27 08:59:41
【问题描述】：

我正在尝试使用 jQuery 和 GPU 加速动画创建一个非常基本的画布外菜单。

.profile-oc-menu { display: none; }

使用 display:none 是我能够使右侧非画布菜单正常工作的唯一方法，因此页面不能水平滚动。

问题是初始动画没有滑入。但后续动画正确滑入。

我尝试了多种不同的方法来解决这个问题，包括添加一个带有以下声明的“.close”类：

.closed { visibility: hidden; overflow: hidden, width: 0; }

有趣的是，这种方法确实有效，但它会在“隐藏”元素所在的位置留下空白。更奇怪的是，当您调整浏览器窗口的大小（即使是 1px）时，空白区域会消失，并且菜单可以正常工作。

谁能帮我理解为什么初始动画（单击右键）无法动画？

已由 JoshC 解决！ http://jsfiddle.net/CwmMQ/4/

更新了包含 JoshC 解决方案的演示，该解决方案还修复了面板上的高度问题（针对感兴趣的人） - http://jsfiddle.net/CwmMQ/5/

更新添加溢出：隐藏到正文元素禁用页面滚动。我试图找到解决这个问题的方法，比如添加 overflow-x: hidden，但这并没有真正奏效，所以我又尝试了一次。

请参阅以下解决初始问题的示例。请随时在您的项目中使用它。 :) http://jsfiddle.net/CwmMQ/6/

【问题讨论】：

【解决方案1】：

我能想到的最简单的解决方案是将overflow:hidden 添加到body 元素并从滑块中删除display:none。

body {
     overflow:hidden;
}

【讨论】：