display：none停止初始translate3d动画

Question

演示：http://jsfiddle.net/CwmMQ/3/

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

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

使用display：none是我能够让正确的非画布菜单正常工作以使页面不能水平滚动的唯一方法。

问题是初始动画不会滑入。后续动画可以正确滑入。

我尝试了许多不同的方法来解决这个问题，包括使用以下声明添加'.closed'类：

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

有趣的是，这种方法确实有效，但它留下了“隐藏”元素所在的空白区域。更奇怪的是，当您调整浏览器窗口大小时（即使是1px），白色空间也会消失，菜单也能完美运行。

任何人都可以帮我理解为什么初始动画（点击右键）无法动画？

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

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

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

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

Answer 1

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

jsFiddle example

body {
     overflow:hidden;
}