removeComplete

Событие removeComplete используется для отслеживания завершения удаления элементов из сетки. Оно срабатывает после того, как элементы полностью удалены из внутренней структуры Masonry и после завершения всех связанных с этим операций перерасчёта и анимации.

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

Механизм удаления элементов

Удаление элементов в Masonry происходит не напрямую через DOM, а через внутренний API библиотеки. Стандартная последовательность выглядит следующим образом:

  1. Выбор элементов, которые должны быть удалены.
  2. Передача элементов в метод remove.
  3. Перерасчёт сетки с помощью layout.
  4. Завершение анимации перестройки.
  5. Генерация события removeComplete.

Пример последовательности:

var msnry = new Masonry('.grid');

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

msnry.remove(items);
msnry.layout();

После выполнения этих операций Masonry запускает событие removeComplete.

Назначение события

Событие выполняет несколько важных функций:

  • сигнализирует о полном завершении удаления
  • гарантирует, что сетка уже пересчитана
  • обеспечивает корректную точку синхронизации для других операций
  • предотвращает выполнение логики до завершения анимаций

Это особенно важно при использовании CSS-переходов и плавных перестроений сетки.

Подписка на событие

Для отслеживания события используется метод on.

msnry.on('removeComplete', function(removedItems) {
  console.log('Удаление завершено');
});

Функция-обработчик получает аргумент removedItems, содержащий список удалённых элементов.

Параметр removedItems

Аргумент removedItems представляет собой массив объектов Masonry Item. Каждый объект содержит информацию об удалённом элементе.

Структура объекта:

  • element — DOM-элемент
  • position — последняя позиция в сетке
  • size — размеры элемента
  • внутренние служебные свойства Masonry

Пример доступа к DOM-элементам:

msnry.on('removeComplete', function(removedItems) {
  removedItems.forEach(function(item) {
    console.log(item.element);
  });
});

Полный пример удаления элементов

var grid = document.querySelector('.grid');

var msnry = new Masonry(grid, {
  itemSelector: '.grid-item',
  columnWidth: 200,
  gutter: 10
});

var removeButton = document.querySelector('#remove-items');

removeButton.addEventListener('click', function() {

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

  msnry.remove(items);
  msnry.layout();

});

msnry.on('removeComplete', function(removedItems) {

  removedItems.forEach(function(item) {
    console.log('Удалён элемент:', item.element);
  });

});

Алгоритм работы:

  1. Кнопка инициирует удаление элементов.
  2. Метод remove() удаляет их из Masonry.
  3. layout() перестраивает сетку.
  4. После завершения перестройки вызывается removeComplete.

Разница между remove и removeComplete

Важно различать метод удаления и событие завершения удаления.

Элемент Назначение
remove() удаляет элементы из Masonry
layout() перестраивает сетку
removeComplete сообщает о завершении процесса

Метод remove() выполняется мгновенно, а событие removeComplete может происходить позже, особенно при включённых анимациях.

Работа с анимациями

Если используются CSS-переходы, перестроение сетки может занимать время. В этот период DOM уже изменён, но визуальная перестройка ещё продолжается.

Событие removeComplete возникает только после окончания анимации.

Это позволяет:

  • избежать визуальных артефактов
  • синхронизировать дальнейшие действия
  • гарантировать корректную геометрию сетки

Пример задержки выполнения логики:

msnry.on('removeComplete', function() {
  loadMoreItems();
});

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

Событие работает одинаково для одного и для множества элементов.

var item = document.querySelector('.grid-item');

msnry.remove(item);
msnry.layout();

Обработчик:

msnry.on('removeComplete', function(removedItems) {
  console.log(removedItems.length);
});

В этом случае removedItems.length будет равен 1.

Удаление группы элементов

Masonry поддерживает передачу NodeList, массива или одиночного элемента.

var items = document.querySelectorAll('.grid-item.old');

msnry.remove(items);
msnry.layout();

После завершения:

msnry.on('removeComplete', function(items) {
  console.log('Удалено элементов:', items.length);
});

Очистка интерфейса после удаления

Событие удобно использовать для синхронизации UI.

Например, скрытие панели управления, если элементов больше нет.

msnry.on('removeComplete', function() {

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

  if (remaining.length === 0) {
    document.querySelector('.controls').style.display = 'none';
  }

});

Подгрузка новых элементов

После удаления часто выполняется загрузка новых элементов.

msnry.on('removeComplete', function() {

  fetch('/items')
    .then(response => response.json())
    .then(data => addItems(data));

});

Это гарантирует, что новая загрузка не начнётся до завершения перестройки сетки.

Удаление элементов с анимацией исчезновения

Распространённый подход — сначала выполнить CSS-анимацию, а затем удалить элемент.

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

items.forEach(function(item) {
  item.classList.add('fade-out');
});

После окончания анимации:

setTimeout(function() {

  msnry.remove(items);
  msnry.layout();

}, 300);

Событие removeComplete позволит продолжить работу после окончательного удаления.

Использование once

Иногда требуется одноразовый обработчик.

msnry.once('removeComplete', function() {
  console.log('Удаление завершено один раз');
});

После первого срабатывания обработчик автоматически удаляется.

Типичные ошибки

Отсутствие layout()

После remove() необходимо выполнить перестройку.

Неправильно:

msnry.remove(items);

Правильно:

msnry.remove(items);
msnry.layout();

Без layout() событие removeComplete может не сработать.

Прямое удаление DOM

Нельзя удалять элементы напрямую через DOM, минуя Masonry.

Неправильно:

element.remove();

Это нарушает внутреннюю структуру библиотеки.

Правильно:

msnry.remove(element);
msnry.layout();

Выполнение логики слишком рано

Частая ошибка — выполнение действий сразу после remove().

msnry.remove(items);
updateInterface();

Корректный подход:

msnry.remove(items);
msnry.layout();

msnry.once('removeComplete', updateInterface);

Комбинирование с другими событиями

Masonry предоставляет несколько событий, связанных с изменением структуры:

Событие Назначение
layoutComplete завершение перестроения
removeComplete завершение удаления
appendComplete завершение добавления

Комбинация событий позволяет построить сложную логику управления сеткой.

Пример:

msnry.on('removeComplete', function() {
  console.log('Элементы удалены');
});

msnry.on('layoutComplete', function() {
  console.log('Сетка перестроена');
});

Использование в динамических приложениях

В интерфейсах с большим количеством динамических операций (SPA, бесконечная прокрутка, фильтрация контента) событие removeComplete играет роль точки синхронизации между состоянием данных и визуальным представлением.

Типичный цикл работы:

  1. фильтрация элементов
  2. удаление ненужных
  3. перестройка сетки
  4. событие removeComplete
  5. обновление состояния приложения
  6. загрузка новых элементов

Такой подход обеспечивает предсказуемое и стабильное поведение интерфейса даже при большом количестве операций изменения DOM.

Оглавление