如何在移动导航上停止从"Flickering"的CSS转换

Question

我创建了一个Codpen Pen来显示我遇到的问题。当您将浏览器大小调整为媒体查询时，在这种情况下<600px，您将看到"切换"关闭画布移动导航的闪烁，这使得调整大小变得尴尬和糟糕的用户体验。

问题是第 28 行的过渡：

@include transition(all .25s linear);

如果我删除该行，它会解决所有问题，但会删除破坏移动导航目的的过渡（它将流畅的导航变成我不想要的笨拙的东西）。我该如何解决这个问题？我已经尝试过：

-webkit-transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
-webkit-perspective: 1000;

我将不胜感激任何帮助！

Answer 1

演示 - http://codepen.io/anon/pen/vEXaVP

与其使用transform:translateX不如使用left

.sliding-menu-content {
    left:-220px;
}
&.is-visible {
    left:0px;
}