서랍 메뉴 성능

Question

저는 Angular2를 사용하여 (모바일 버전의) 웹 애플리케이션 용 사이드 메뉴를 개발하고 있습니다.

이 사용자 프레스는 오픈 메뉴 버튼 내가이는 JS 코드 jQuery를

을

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

사용하여 다음과 같은 클래스를 추가하면 메뉴가

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

폐쇄되어있는 클래스 :

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

데스크톱 컴퓨터에서이 코드를 사용하면 실적이 좋지만 모바일 버전에서는 지연됩니다. 와이. 성능을 향상시킬 방법이 있습니까?

메뉴가 꽤 가볍고 많은 노드가 포함되어 있지 않습니다. 다른 웹 사이트는 메뉴가 사물로 가득차 있어도 꽤 좋은 공연을 볼 수 있습니다. 번역 강력하고 운동이 원활하게 렌더링을위한 GPU에 기댈 때문에

감사 x/y 번역 많은

Answer 1

는 전환 또는 애니메이션 top/left보다 더 성능이 좋은 것입니다. 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); 
}