Перейти к основному содержимому

Анимации и layout

Общие правила​

MUST​

  • Анимировать только GPU-accelerated свойства (opacity, transform).
  • Избегать layout thrashing.

FORBIDDEN​

  • Анимировать top/left/right/bottom, width/height, margin/padding.

Когда нужен FLIP​

Если изменение layout неизбежно — используем FLIP (First, Last, Invert, Play).

Пример (концепт)​

const first = el.getBoundingClientRect();
// изменяем layout
applyLayoutChange();
const last = el.getBoundingClientRect();

const invertX = first.left - last.left;
const invertY = first.top - last.top;
el.animate(
  [
    { transform: `translate(${invertX}px, ${invertY}px)` },
    { transform: 'translate(0, 0)' }
  ],
  { duration: 200, easing: 'ease-out' }
);

Диаграмма: рендеринг браузера​

Layout thrashing​

MUST​

  • Не чередовать чтение layout и запись стилей в циклах.

✅ Хорошо

const widths = items.map((el) => el.offsetWidth);
items.forEach((el, i) => {
  el.style.width = `${widths[i]}px`;
});

❌ Плохо

items.forEach((el) => {
  const w = el.offsetWidth;
  el.style.width = `${w}px`;
});

Процедуры контроля (Code Review)​

Ревьюер должен убедиться, что:​

  • анимации не вызывают layout/reflow
  • тяжелые вычисления вынесены из основного потока
  • FLIP используется при неизбежных layout-изменениях