Ответ
FLIP — техника анимации, оптимизирующая производительность за счёт расчёта изменений заранее. Аббревиатура расшифровывается:
- First — запоминаем начальное состояние (например,
getBoundingClientRect()) - Last — фиксируем конечное состояние после изменений (например, после добавления класса)
- Invert — вычисляем разницу и применяем transform для имитации исходного положения
- 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), избегает дорогих вычислений в процессе анимации.
Ответ 18+ 🔞
А, слушай, вот есть такая штука — FLIP, ну просто пиздец как хитрая техника для анимаций. Суть в том, чтобы не ебашить браузер вычислениями в реальном времени, а всё прикинуть заранее, как шахматист на три хода вперёд. Расшифровывается просто:
- First — сначала хватаем элемент за его начальные координаты, типа
getBoundingClientRect(). Запомнили, где он сидит. - Last — потом делаем то, что хотели (добавляем класс, меняем стили), и сразу же смотрим, где он должен оказаться в итоге. Снова
getBoundingClientRect(). - Invert — а вот тут магия, блядь. Берём разницу между «было» и «стало», и с помощью
transformоткатываем элемент НАЗАД, на старую позицию. Для зрителя он как будто никуда не двигался, но технически он уже готов к прыжку. - Play — и тут включаем анимацию! Убираем наш инвертирующий трансформ, и элемент плавно едет на своё законное, заранее вычисленное место. А всё потому, что анимируем мы только
transformиopacity— это ж почти бесплатно для видеокарты!
Смотри, как это в коде выглядит, ёпта:
// F — хватаем начальное состояние
const first = element.getBoundingClientRect();
// L — врубаем финальные стили (например, класс)
element.classList.add('animate');
// И сразу ловим, куда он должен приехать
const last = element.getBoundingClientRect();
// I — считаем, насколько надо откатить
const deltaX = first.left - last.left;
const deltaY = first.top - last.top;
// И откатываем! Элемент визуально на месте, но технически — уже нет.
element.style.transform = `translate(${deltaX}px, ${deltaY}px)`;
// P — Поехали, мать его!
requestAnimationFrame(() => {
element.style.transition = 'transform 0.5s ease';
// Убираем трансформ — и он летит на нужное место.
element.style.transform = '';
});В чём прикол-то? Всё самое тяжёлое (получение позиций) делается ДО анимации, одним махом. А в процессе самой анимации браузер тупо двигает картинку силами GPU, не пересчитывая всю вёрстку каждые полмиллисекунды. Итог — анимации гладкие, даже если элементов овердохуища. Хитрая жопа, но работает, блядь, как часы.