Question

我有一个快速响应的移动网站，我正在创建一个CSS汉堡菜单（一个滑出的面板菜单）。

我实现它的方式非常简单（我选择不使用任何现有框架）。它使用transition处的left .3s ease-in-out属性并操纵left属性。

所有浏览者的表现都很糟糕。它绝对是“可以接受的”，但并不是非常顺利。

不幸的是，到目前为止所有我发现的脚本具有相同的缓慢性能。例如This one看起来很棒，但是很迟钝。

现在，有一个例外...... THIS menu以某种方式工作如此惊人且完美顺畅。它完美无瑕......但我无法弄清楚他是如何做到的。如果您没有看到该菜单，请将浏览器的大小调整为小，直到它出现。

他的JS和CSS严重破坏了我的网站，这就是我无法真正使用它的原因。它甚至不值得修改他的代码。但我很想知道他的CSS的哪一部分真的让它如此流畅。

谢谢！

Answer 1

将以下内容添加到导航

transform: translateZ(0);

这将启动硬件加速并使转换更顺畅

你也可以通过添加

来帮助它

transition: all 0.6s ease;
perspective: 1000;
-webkit-backface-visibility: hidden;

Answer 2

我认为您链接的第一个animation-timing-function ease-out，而您说的非常顺畅的第二个肯定是线性的。

这只是一个小建议，但请尝试从

更改代码

left .3s ease-in-out

到

left .3s linear

也许会有所帮助。

编辑：查看我为您制作的jsfiddle，也许它可以帮助您确定哪个选项效果最佳。

我在Chrome中获得了不同的结果。使用transform: translateX()功能，动画更加流畅。在Firefox中，它们看起来都一样。