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);
}

抽屉菜单表演

1 个答案: