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

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

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

При нажатии на кнопку, чтобы переместить меню контейнера/шоу, класс добавляется в контейнер родителя и КСС изменен:

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

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

источник

2015-12-04 user4675957

Вы можете поделиться демонстрацией для нас, чтобы увидеть, что заставляет анимацию не выполнять «лучше». –

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

Here is an example of translateX in action для открытия/закрытия меню.

источник

2015-12-04 22:59:24

Спасибо за ответ, но я думаю, что вы ошибаетесь. Это показывает, что можно использовать свойства позиции: https://developer.mozilla.org/en/docs/Web/CSS/will-change Я попытался использовать преобразование, но проблема в том, что, когда я использую преобразование, переход с переходом справа не жидкий, поскольку я хочу добавить правое заполнение в контейнер, чтобы содержимое оставалось на странице и не покидало страницу – user4675957

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

ответ

Смежные вопросы