jquery - 显示:none stopping initial translate3d animation

Question

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

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

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

使用 display:none 是我能够使右侧 Canvas 外菜单正常工作以使页面不可水平滚动的唯一方法。

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

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

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

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

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

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

更新了演示，合并了 JoshC 的解决方案，该解决方案还修复了面板上的高度问题(对于感兴趣的人) - http://jsfiddle.net/CwmMQ/5/

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

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

Answer 1

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

jsFiddle example

body {
     overflow:hidden;
}