Изменит использование CSS при переходе

Question

Я пытаюсь использовать will-change чтобы анимация работала лучше. У меня есть страница-контейнер, который будет анимировать left а также padding-right для того, чтобы переместить и открыть боковое меню.

.page-container {
    background: #f4f4f4;
    height: 100%;
    left: 0;
    padding-right: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 1001;
    will-change: left, padding-right;
    transition: left 0.4s ease-out, padding-right 0.4s ease-out;
    } 

Когда нажимается кнопка для перемещения контейнера / показа меню, класс добавляется в родительский контейнер, а css изменяется на:

.page-wrapper.menu-opened .page-container {
            left: 240px;
            padding-right: 240px;
            }   

will-change кажется, не имеет никакого влияния. Правильно ли я это использую, или как это следует использовать?

Answer 1

Использование transform: translateX(240px) вместо left: 240px, Причина этого не в том, что position свойство не поддерживает аппаратное ускорение, а transform собственность делает.

Вот пример работы translateX для открытия / закрытия меню.