抽屉菜单表演

Question

我正在使用 Angular2 为我的网络应用程序（移动版）开发一个侧边菜单。

关闭菜单时的类

.main-drawer
{
    left: -300px;
    width: 300px;
    max-width: 100%;
    z-index: 2;
    transition-property: left;
    transition-duration: 300ms;
    transition-timing-function: ease-out;
}

当用户按下打开菜单按钮时，我使用 jQuery 添加以下类

.main-drawer.opened
{
    left:0;
    transition-property: left;
    transition-duration: 300ms;
    transition-timing-function: ease-out;
}

这是js代码：

let drawer = jQuery ('.main-drawer');
drawer.toggleClass ('opened', !drawer.hasClass ('opened'));

在台式计算机上使用此代码性能很好，但在移动版本上却很滞后。 有没有办法提高每项性能？

菜单非常轻量级，不包含很多节点。 我注意到其他网站的表现相当不错，即使他们的菜单上满是东西。

非常感谢

Answer 1

翻译x/y 比过渡或动画top/left 的性能更高，因为翻译依赖于GPU 进行渲染，它功能强大并且使运动平滑。 top 和 left 在 DOM 级别运行，这是有限制的。

此外，您可以稍微缩短一些内容。您可以在初始元素的一个位置定义过渡，然后只定义添加的类中发生的变化。试试这个：

.main-drawer
{
    transform: translateX(-300px);
    width: 300px;
    max-width: 100%;
    z-index: 2;
    transition: 300ms transform ease-out;
}

.main-drawer.opened
{
    transform: translateX(0);
}