Как предотвратить перерисовку других элементов при использовании CSS-перехода - PullRequest
Новая
       12

Как предотвратить перерисовку других элементов при использовании CSS-перехода

0 голосов
/ 21 января 2019

Я пытаюсь предотвратить перерисовку браузера, чтобы повысить производительность в большом одностраничном приложении, которое использует CSS-анимацию.

Если у меня есть элемент с эффектом :hover { transform: scale(...) }, я могу предотвратить перерисовку, используя will-change: transform и / или transform: translateZ(0), как указано здесь .

Но как только я добавлю transition к этому элементу, многие элементы снова будут перекрашиваться.

Вот демо-код и его рисунок enter image description here

Единственное, что сработало для предотвращения этого перекрашивания, - это поместить другие элементы перед элементом анимации в порядке DOM или z-индексировать элемент анимации над другими элементами. Но со сложным одностраничным приложением я не хочу микроуправлять z-индексом любого элемента, который просто хочет переход при наведении.

Какие-нибудь другие идеи или ссылки? Я не видел этой конкретной проблемы с transition, обсуждаемыми в другом месте.

1 Ответ

0 голосов
/ 21 января 2019

Казалось, что position: absolute; на .other не создает новый слой, я смог решить проблему, добавив transform: translateZ(0) к классу .other.

JSbin

Учитывая то, что вы работаете над SPA, я не уверен, насколько осуществим этот подход, поскольку после круга могут быть сотни элементов.

...