Представления меню ящика

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