Что такое FLIP-техника для анимаций

FLIP — техника анимации, оптимизирующая производительность за счёт расчёта изменений заранее. Аббревиатура расшифровывается:

1. First — запоминаем начальное состояние (например, getBoundingClientRect())
2. Last — фиксируем конечное состояние после изменений (например, после добавления класса)
3. Invert — вычисляем разницу и применяем transform для имитации исходного положения
4. Play — запускаем анимацию к конечному состоянию

Пример:

// Запоминаем начальную позицию
const first = element.getBoundingClientRect();

// Применяем изменения (например, добавляем класс)
element.classList.add('animate');

// Получаем конечную позицию
const last = element.getBoundingClientRect();

// Вычисляем разницу
const deltaX = first.left - last.left;
const deltaY = first.top - last.top;

// Инвертируем через transform
element.style.transform = `translate(${deltaX}px, ${deltaY}px)`;

// Запускаем анимацию
requestAnimationFrame(() => {
  element.style.transition = 'transform 0.5s ease';
  element.style.transform = '';
});

Преимущества: работает на GPU (transform/opacity), избегает дорогих вычислений в процессе анимации.