Кастомная анимация исчезновения

Masonry в JavaScript является мощной библиотекой для создания сеточных макетов с динамическим расположением элементов. Одним из важных аспектов при работе с Masonry является управление исчезновением элементов с кастомной анимацией, что позволяет создавать плавные визуальные эффекты при удалении карточек, блоков или изображений из сетки.

Подключение и инициализация Masonry

Для корректной работы кастомной анимации необходимо правильно инициализировать Masonry. Основной синтаксис:

const grid = document.querySelector('.grid');
const msnry = new Masonry(grid, {
  itemSelector: '.grid-item',
  columnWidth: '.grid-sizer',
  percentPosition: true,
  transitionDuration: 0 // Отключаем встроенные анимации для кастомной анимации
});

Ключевые моменты:

  • transitionDuration: 0 — отключает встроенные анимации Masonry, чтобы полностью контролировать эффекты исчезновения через CSS или JS.
  • itemSelector — определяет элементы, которые будут управляться Masonry.
  • columnWidth и percentPosition позволяют Masonry корректно рассчитывать позиции элементов с процентными размерами.

Подготовка CSS для кастомной анимации

Кастомные эффекты исчезновения лучше всего реализовывать через CSS-переходы или анимации. Пример использования CSS:

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

.grid-item.is-hidden {
  opacity: 0;
  transform: scale(0.8);
}

Пояснение:

  • opacity отвечает за прозрачность элемента.
  • transform: scale(0.8) добавляет эффект сжатия при исчезновении.
  • Класс is-hidden будет динамически добавляться к элементу перед его удалением из DOM.

Управление исчезновением через JavaScript

Удаление элементов с кастомной анимацией требует двух этапов: добавление класса для запуска анимации и окончательное удаление из Masonry и DOM после завершения анимации.

function removeItem(item) {
  // Добавляем класс, который запускает CSS-анимацию
  item.classList.add('is-hidden');

  // Ждем окончания перехода перед удалением элемента
  item.addEventListener('transitionend', () => {
    msnry.remove(item);
    msnry.layout();
    item.remove();
  }, { once: true });
}

Особенности реализации:

  • Использование { once: true } предотвращает множественные вызовы обработчика события.
  • msnry.remove(item) уведомляет Masonry, что элемент должен быть удален из сетки.
  • msnry.layout() обновляет позиции оставшихся элементов после удаления.

Поддержка нескольких элементов одновременно

Для удаления сразу нескольких элементов можно использовать массив или NodeList:

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

itemsToRemove.forEach(item => removeItem(item));

Masonry корректно перерассчитает позиции после удаления каждого элемента, создавая плавный эффект перестройки сетки.

Использование JavaScript-анимации через requestAnimationFrame

Для более сложных сценариев, например, поэтапного исчезновения с задержками или сложной трансформацией, можно комбинировать CSS и Jav * aScript:

function fadeOut(item, duration = 500) {
  const start = performance.now();

  function animate(time) {
    const elapsed = time - start;
    const progress = Math.min(elapsed / duration, 1);

    item.style.opacity = 1 - progress;
    item.style.transform = `scale(${1 - 0.2 * progress})`;

    if (progress < 1) {
      requestAnimationFrame(animate);
    } else {
      msnry.remove(item);
      msnry.layout();
      item.remove();
    }
  }

  requestAnimationFrame(animate);
}

Преимущества такого подхода:

  • Полный контроль над кривой анимации.
  • Возможность задавать различные эффекты, например, смещение, вращение, изменения размера.
  • Синхронизация с Masonry через вызовы remove() и layout() после завершения анимации.

Интеграция с динамическим контентом

При добавлении и удалении элементов динамически (например, через AJAX или генерацию карточек) кастомная анимация исчезновения работает аналогично:

// После добавления нового элемента
msnry.appended(newItem);

// При удалении
removeItem(newItem);

Это обеспечивает плавное исчезновение элементов без «скачков» сетки, сохраняя визуальную консистентность интерфейса.

Советы по производительности

  • Минимизировать количество одновременно анимируемых элементов для снижения нагрузки на браузер.
  • Использовать will-change: opacity, transform; в CSS для ускорения рендеринга.
  • Отключать встроенные анимации Masonry (transitionDuration: 0) при работе с кастомными эффектами, чтобы избежать конфликтов.

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

Оглавление