fitComplete

Packery — это библиотека для создания динамических сеток с возможностью «встройки» элементов друг в друга, похожая на Masonry, но с более гибкой логикой расположения. Для работы с Packery необходимо подключить сам скрипт и стили для контейнера и элементов.

import Packery from 'packery';

const grid = document.querySelector('.grid');
const pckry = new Packery(grid, {
  itemSelector: '.grid-item',
  gutter: 10,
  percentPosition: true
});
  • itemSelector — селектор элементов сетки.
  • gutter — отступ между элементами.
  • percentPosition — если true, координаты рассчитываются в процентах, что полезно для адаптивных сеток.

Использование метода fitComplete

Метод fitComplete предназначен для работы с анимациями при перемещении элементов. Он вызывается автоматически после завершения операции fit, когда элемент перемещается на новое место в сетке.

pckry.on('fitComplete', (item) => {
  console.log('Элемент завершил перемещение:', item.element);
});
  • item.element — DOM-элемент, который завершил анимацию.
  • Событие fitComplete удобно использовать для запуска сторонних анимаций или синхронизации других компонентов интерфейса.

Отличие fit и fitComplete

Метод fit перемещает элемент в указанное место сетки:

pckry.fit(itemElement, x, y);
  • x, y — координаты, куда должен переместиться элемент.
  • Сразу после вызова fit элемент начинает анимацию перемещения.
  • fitComplete срабатывает только после завершения этой анимации.

Это разделение важно для контроля синхронизации: нельзя полагаться на мгновенное завершение fit, если требуется выполнять действия после позиционирования.

Примеры практического использования

  1. Динамическое перемещение элементов при фильтрации
const filterButton = document.querySelector('#filter');
filterButton.addEventListener('click', () => {
  const items = grid.querySelectorAll('.grid-item');
  items.forEach(item => {
    if (!item.classList.contains('active')) {
      pckry.fit(item, 0, 0); // перемещаем скрытые элементы
    }
  });
});
pckry.on('fitComplete', (item) => {
  item.element.style.opacity = 1; // плавное появление после перемещения
});
  1. Интерактивная сортировка элементов
grid.addEventListener('dragend', (event) => {
  const item = event.target;
  const newX = item.offsetLeft;
  const newY = item.offsetTop;
  pckry.fit(item, newX, newY);
});

pckry.on('fitComplete', (item) => {
  console.log('Элемент переставлен:', item.element.dataset.id);
});
  • В примере dragend используется вместе с Packery для обновления позиции элемента после перетаскивания.
  • fitComplete гарантирует, что все вычисления позиции завершены до выполнения логики обновления данных.

Управление анимацией

Packery поддерживает CSS-переходы и анимацию через свойства transition. В сочетании с fitComplete можно плавно менять свойства элементов:

.grid-item {
  transition: transform 0.4s ease, opacity 0.4s ease;
}
pckry.on('fitComplete', (item) => {
  item.element.classList.add('highlight');
  setTimeout(() => {
    item.element.classList.remove('highlight');
  }, 500);
});
  • Использование fitComplete обеспечивает точное время запуска анимаций после физического перемещения элементов.
  • Можно сочетать с задержками и каскадными эффектами для создания сложных интерфейсных решений.

Интеграция с другими событиями

Packery позволяет связывать fitComplete с другими событиями: dragItemPositioned, layoutComplete, removeComplete. Это полезно при построении интерактивных интерфейсов, где требуется последовательное выполнение действий после изменения сетки.

pckry.on('layoutComplete', () => {
  console.log('Сетка полностью перестроена');
});

pckry.on('fitComplete', (item) => {
  console.log('Отдельный элемент завершил перемещение');
});
  • layoutComplete срабатывает после полной перестройки сетки, включая все элементы.
  • fitComplete работает на уровне отдельного элемента, что дает более точный контроль для анимаций и событий.

Рекомендации по использованию

  • Для больших сеток рекомендуется минимизировать количество операций fit одновременно, чтобы избежать проседания производительности.
  • Для адаптивного дизайна использовать percentPosition: true и CSS transition для плавного изменения положения.
  • fitComplete идеально подходит для связывания перемещения с визуальными эффектами, событиями загрузки или асинхронными действиями.

Сочетание методов fit и события fitComplete делает Packery мощным инструментом для создания динамических сеток с точным контролем над анимацией и расположением элементов.

Оглавление