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

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

Подключение анимаций

Для управления анимацией исчезновения Masonry использует CSS transitions и свойства transition, opacity и transform. Основная идея заключается в том, что перед удалением элемента необходимо задать ему состояние, при котором он постепенно исчезает из DOM.

Пример базового CSS для анимации исчезновения:

.grid-item {
  transition: all 0.4s ease;
  opacity: 1;
}

.grid-item.removing {
  opacity: 0;
  transform: scale(0.8);
}
  • opacity — регулирует прозрачность элемента.
  • transform: scale(0.8) — уменьшает размер элемента при исчезновении.
  • transition — задает длительность и плавность анимации.

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

Удаление элемента в Masonry требует последовательного выполнения нескольких шагов:

  1. Добавление класса для анимации исчезновения.
  2. Прослушивание события окончания CSS-транзишна.
  3. Удаление элемента из DOM и вызов метода layout() для пересчета сетки.

Пример на Jav * aScript:

const grid = document.querySelector('.grid');
const msnry = new Masonry(grid, {
  itemSelector: '.grid-item',
  columnWidth: '.grid-sizer',
  percentPosition: true
});

function removeItem(item) {
  item.classList.add('removing');

  item.addEventListener('transitionend', function handler() {
    item.removeEventListener('transitionend', handler);
    grid.removeChild(item);
    msnry.layout();
  });
}
  • item.classList.add('removing') — инициирует визуальное исчезновение.
  • transitionend — гарантирует, что элемент удаляется только после завершения анимации.
  • msnry.layout() — пересчитывает расположение оставшихся элементов.

Анимация исчезновения нескольких элементов

При удалении нескольких элементов одновременно можно использовать цикл и применять анимацию каждому элементу. Для более плавного визуального эффекта рекомендуется задавать небольшие задержки между элементами с помощью setTimeout или CSS-свойства transition-delay.

Пример с задержкой:

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

itemsToRemove.forEach((item, index) => {
  setTimeout(() => removeItem(item), index * 100);
});
  • index * 100 — задержка 100 мс между исчезновениями соседних элементов.
  • Позволяет создать эффект “волны” исчезновения элементов.

Интеграция с внешними анимационными библиотеками

Для более сложных эффектов исчезновения Masonry может быть комбинирован с библиотеками вроде GSAP или Anime.js. Это позволяет анимировать не только прозрачность и масштаб, но и вращение, смещение, кривые движения.

Пример с GSAP:

function removeItemGSAP(item) {
  gsap.to(item, {
    duration: 0.5,
    opacity: 0,
    scale: 0.8,
    onComplete: () => {
      grid.removeChild(item);
      msnry.layout();
    }
  });
}
  • gsap.to управляет анимацией элемента.
  • onComplete выполняет удаление и пересчет Masonry после завершения анимации.

Важные особенности

  • Masonry не управляет анимацией самостоятельно, она полностью зависит от CSS или сторонней библиотеки.
  • Без вызова msnry.layout() после удаления элемента сетка может остаться некорректной.
  • Для производительности рекомендуется анимировать только transform и opacity, избегая изменения размеров через width и height.

Практические советы

  • Для динамически подгружаемого контента анимация исчезновения должна сочетаться с анимацией появления, чтобы сетка выглядела естественно.
  • Использование классов adding и removing с разными CSS-свойствами позволяет поддерживать симметричные эффекты входа и выхода элементов.
  • Оптимальная длительность анимации — 300–500 мс, что обеспечивает плавность, но не задерживает интерфейс.

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

Оглавление