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

Библиотека Isotope предоставляет мощный инструмент для организации и фильтрации элементов сетки, включая плавное исчезновение и появление элементов. Анимация исчезновения элементов осуществляется через комбинацию CSS-транзишнов и методов управления фильтрацией в Isotope. Это позволяет не просто скрывать элементы мгновенно, а создавать визуально плавный эффект исчезновения, который улучшает восприятие интерфейса.

Ключевой момент — синхронизация CSS-анимации с методами фильтрации Isotope. Без этого элементы будут просто скрываться мгновенно, что лишает пользовательский интерфейс динамичности.

Настройка CSS для исчезновения

Для корректной работы анимации исчезновения необходимо определить CSS-классы с переходами прозрачности и масштабирования. Пример базовой настройки:

.grid-item {
  transition: transform 0.4s ease, opacity 0.4s ease;
  opacity: 1;
  transform: scale(1);
}

.grid-item.is-hidden {
  opacity: 0;
  transform: scale(0.5);
  pointer-events: none;
}
  • opacity — плавно уменьшает видимость элемента.
  • transform: scale — добавляет эффект сжатия элемента при исчезновении.
  • pointer-events: none — предотвращает взаимодействие с скрытым элементом.

Эти свойства обеспечивают плавное исчезновение элемента с визуальным эффектом сжатия.

Управление фильтрацией через Isotope

Метод arrange в Isotope позволяет задавать фильтр элементов. Для анимации исчезновения используется класс .is-hidden, который применяет CSS-транзишн. Пример кода:

var iso = new Isotope('.grid', {
  itemSelector: '.grid-item',
  layoutMode: 'fitRows',
  transitionDuration: '0.4s'
});

function hideItems(filterSelector) {
  var items = document.querySelectorAll('.grid-item');

  items.forEach(function(item) {
    if (!item.matches(filterSelector)) {
      item.classList.add('is-hidden');
    } else {
      item.classList.remove('is-hidden');
    }
  });

  iso.arrange(); // Обновление позиции элементов
}
  • transitionDuration задаёт длительность анимации перемещения и исчезновения элементов.
  • Добавление класса .is-hidden инициирует CSS-анимацию исчезновения.
  • Метод arrange() пересчитывает позиции оставшихся элементов после скрытия.

Пошаговая последовательность анимации исчезновения

  1. Определение элементов для скрытия — через селектор или условие фильтрации.
  2. Применение класса .is-hidden — активирует CSS-транзишн.
  3. Пересчёт позиции элементов с помощью arrange() — оставшиеся элементы занимают свободное место.
  4. Удаление элемента из DOM (по необходимости) — если нужно полностью удалить элемент после анимации, можно использовать событие transitionend:
document.querySelectorAll('.grid-item.is-hidden').forEach(function(item) {
  item.addEventListener('transitionend', function() {
    item.remove();
  });
});

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

Управление последовательностью анимаций

Isotope позволяет комбинировать исчезновение элементов с задержкой для создания эффекта каскада. Например, с помощью CSS-переменной transition-delay:

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

.grid-item.is-hidden:nth-child(1) { transition-delay: 0s; }
.grid-item.is-hidden:nth-child(2) { transition-delay: 0.1s; }
.grid-item.is-hidden:nth-child(3) { transition-delay: 0.2s; }
/* И так далее */

Или динамически через Jav * aScript:

items.forEach(function(item, index) {
  if (!item.matches(filterSelector)) {
    item.style.transitionDelay = `${index * 0.05}s`;
    item.classList.add('is-hidden');
  }
});

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

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

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

fetch('/api/items')
  .then(response => response.json())
  .then(data => {
    var grid = document.querySelector('.grid');
    data.forEach(itemData => {
      var item = document.createElement('div');
      item.className = 'grid-item';
      item.textContent = itemData.title;
      grid.appendChild(item);
    });

    iso.appended(grid.querySelectorAll('.grid-item'));
  });

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

Тонкости и оптимизация

  • Использование will-change: transform, opacity ускоряет рендеринг анимации на современных браузерах.
  • Плавность анимации зависит от transitionDuration — слишком короткая длительность создаёт эффект мгновенного исчезновения.
  • Избегать одновременного применения display: none и CSS-анимации — display: none сразу скрывает элемент без перехода. Лучше использовать opacity и transform.
  • Очистка слушателей событий transitionend предотвращает накопление обработчиков при динамическом изменении сетки.

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

Оглавление