removeComplete

Метод removeComplete является важным инструментом для управления элементами сетки в библиотеке Packery. Он позволяет безопасно удалять элементы из сетки, одновременно обеспечивая корректное обновление внутренних структур Packery и плавную анимацию удаления.

Основной синтаксис

// Удаление элемента из Packery с завершением анимации
pckry.removeComplete( itemElements );

Параметры:

  • itemElements — один элемент DOM или массив элементов DOM, которые должны быть удалены из сетки.

Метод не возвращает значения, но гарантирует, что Packery завершит удаление элемента и обновит расположение оставшихся элементов.

Отличие от метода remove

Метод remove удаляет элемент из сетки, но не гарантирует завершение анимации и может привести к визуальным артефактам, если используется вместе с анимацией или последующей перестройкой сетки.

removeComplete выполняет все действия remove, а также:

  1. Плавно убирает элементы с экрана.
  2. Обновляет внутренние массивы Packery (items).
  3. Автоматически вызывает layout() после удаления, обеспечивая правильное позиционирование оставшихся элементов.

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

Удаление одного элемента

var pckry = new Packery('.grid', {
  itemSelector: '.grid-item',
  gutter: 10
});

var item = document.querySelector('.grid-item:nth-child(1)');

// Удаление элемента с завершением анимации
pckry.removeComplete(item);

Удаление нескольких элементов

var itemsToRemove = document.querySelectorAll('.grid-item.remove');

pckry.removeComplete(itemsToRemove);

В этом случае все выбранные элементы будут плавно удалены из сетки, а оставшиеся автоматически перестроятся.

Использование с анимацией

Packery интегрируется с библиотекой Draggabilly и CSS-анимациями. Для плавного исчезновения элементов при removeComplete рекомендуется использовать CSS-переходы:

.grid-item {
  transition: transform 0.4s, opacity 0.4s;
}

.grid-item.removing {
  opacity: 0;
  transform: scale(0.8);
}
var item = document.querySelector('.grid-item');

// Добавление класса для анимации
item.classList.add('removing');

// После небольшой задержки вызвать removeComplete
setTimeout(function() {
  pckry.removeComplete(item);
}, 400);

Взаимодействие с другими методами Packery

  • layout() — после удаления элементов вызов layout() не обязателен, так как removeComplete сам перестраивает сетку.
  • stamp() — если элемент был «штампован», его необходимо сначала удалить с помощью unstamp(), иначе removeComplete не удалит его корректно.
  • destroy() — при уничтожении всей сетки удаление элементов через removeComplete не требуется, так как все DOM-элементы удаляются вместе с контейнером.

Важные моменты

  1. Синхронизация с CSS-анимациями: для достижения плавного эффекта удаление лучше вызывать после завершения CSS-переходов.
  2. Удаление с событийными слушателями: если элемент имеет обработчики событий, они остаются активными до фактического удаления. Рекомендуется очищать события при необходимости.
  3. Поддержка массивов и одиночных элементов: метод универсален и принимает как один элемент, так и коллекцию.
  4. Автоматическое обновление items: внутренний массив Packery корректно обновляется, предотвращая ошибки при последующих вызовах layout() или getItemElements().

Метод removeComplete является предпочтительным для всех сценариев, когда требуется безопасное и анимированное удаление элементов из сетки Packery, обеспечивая стабильность и плавность интерфейса.

Оглавление