几个框是异步动画（翻译）的

Question

说明

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

标题和菜单必须包含属性position: fixed

最初菜单隐藏在页面上。它会在用户点击时显示在一个特定的按钮上。

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

解决方案基于：

将CSS3属性transform与translate3d值和transition: transform 0.5s linear

一起使用

问题

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

的jsfiddle

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

浏览器

Chrome 39

可能是什么造成的？做错了什么......先谢谢。

Answer 1

添加以下内容：

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

Demo Fiddle

Answer 2

<强>固定。

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

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

必须更改为

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

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