抽屉菜单表演

Question

我正在使用Angular2为我的Web应用程序（在移动版本中）开发一个侧面菜单。

这

当菜单关闭

.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')); 

在桌面电脑上使用此代码的性能很好，但在移动版本上它是lagg年。 有没有办法提高每个性能？

菜单非常轻巧，不包含很多节点。 我注意到，即使菜单充满了其他网站，其他网站也有不错的表现。

非常感谢

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