Css 多个框以异步方式设置动画（翻译）

说明：

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

标题和菜单必须具有属性位置：固定

最初，菜单隐藏在页面上。当用户单击某个特定按钮时，会显示该图标

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

解决方案基于：

使用CSS3属性将translate3d值转换为transition:transform 0.5s linear

问题

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

JSFIDLE

以下是一个在线示例：

浏览者

铬39

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

添加以下内容：

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

固定的

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

变换：translate3d100%，0，0

必须改为

变换：translate3d200px，0，0

---

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

不，它没有帮助，同样的行为。我已经找到了解决方案，请看我的答案。在Chrome 39.0.2171.65 m版中，Hmmm上述功能正常，因此将离开，以防它对其他人有所帮助。我使用39.0.2171.65 m版，完全相同：可能还取决于计算机的性能。