ios - 如何提高 iOS 汉堡菜单的 CSS 性能？

Question

我有一个响应式移动网站，我正在创建一个 CSS 汉堡菜单(一个滑出的面板菜单)。

我实现它的方式非常简单(我选择不使用任何现有的框架)。它通过使用 transition 来工作位于 left .3s ease-in-out 的房产, 并操纵 left属性(property)。

所有浏览器的性能都很差。这绝对是“可以接受的”，但并不完全顺利。

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

现在，有一个异常(exception)... THIS menu不知何故，工作如此惊人和完美流畅。完美无瑕……但我不知道他是怎么做到的。如果您没有看到菜单，请将浏览器的大小调小直到出现。

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

谢谢!

Answer 1

将以下内容添加到您的导航中

transform: translateZ(0);

这将启动硬件加速并使过渡更加顺畅

您还可以通过添加来帮助它

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