多个框以异步方式进行动画(翻译)

Question

描述：

该页面由三个主要框组成：顶部的标题，右侧的菜单和内容区域。

标题和菜单必须带有属性position: fixed

最初菜单在页面上隐藏。当用户单击例如特定按钮时，它就会出现。

当它出现时，它会从右向左滑动。同时标题和内容被推到左侧。

解决方案基于：

使用 CSS3 属性transform translate3d值和transition: transform 0.5s linear

问题所在

在菜单和带有标题框的内容之间的动画中，我们可以看到闪烁的白色区域。玩弄背面可见性并没有帮助。

JSFiddle

下面是一个在线示例：http://jsfiddle.net/milax/5uc7or6r/6/

浏览器

铬 39

可能是什么原因造成的？做错了什么...提前谢谢。

Answer 1

添加以下内容：

.site-wrapper div {
    transition: transform 0.5s linear;
    backface-visibility: hidden;
    outline: 1px solid transparent; /* <--- fixes horrible anti-aliasing */
}

演示小提琴

Answer 2

固定。

问题在于使用百分比而不是像素作为属性translate3d。所以

transform: translate3d(100%, 0, 0);

必须更改为

transform: translate3d(200px, 0, 0);

当然，如果您确切地知道菜单的宽度。