Анимация при фильтрации

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

Настройка контейнера и элементов

Для работы с анимацией контейнер должен содержать сетки элементов с единым классом. Пример структуры:

<div class="grid">
  <div class="grid-item category-a">Элемент 1</div>
  <div class="grid-item category-b">Элемент 2</div>
  <div class="grid-item category-a">Элемент 3</div>
  <div class="grid-item category-c">Элемент 4</div>
</div>

Каждый элемент должен иметь одинаковую ширину или высоту, чтобы Isotope корректно рассчитывал позиции. Если размеры элементов разные, необходимо указать masonry layout mode для правильной анимации.

Инициализация Isotope с анимацией

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

var iso = new Isotope(grid, {
  itemSelector: '.grid-item',
  layoutMode: 'fitRows',
  transitionDuration: '0.6s', // скорость анимации
});

Ключевой параметр: transitionDuration — задает длительность анимации перемещения элементов. Можно указывать в секундах (0.6s) или миллисекундах (600ms).

Фильтрация с плавным эффектом

Фильтрация элементов осуществляется методом arrange:

// Показать только элементы категории A
iso.arrange({ filter: '.category-a' });

Isotope автоматически применяет анимацию: скрытые элементы исчезают с плавным переходом, а оставшиеся перемещаются на новые позиции.

Можно комбинировать фильтры с CSS-классами:

iso.arrange({ filter: '.category-a, .category-b' }); // отображение нескольких категорий

Управление стилями анимации через CSS

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

.grid-item {
  opacity: 1;
  transform: translate(0, 0);
  transition: transform 0.6s ease, opacity 0.6s ease;
}

.grid-item.isotope-hidden {
  opacity: 0;
  transform: scale(0.5);
  pointer-events: none;
}

Пояснение:

  • opacity управляет прозрачностью при скрытии/показе.
  • transform позволяет изменять положение или масштаб.
  • Класс .isotope-hidden применяется автоматически при фильтрации.

События анимации

Isotope предоставляет события для отслеживания изменений:

  • arrangeComplete — вызывается после завершения анимации фильтрации.
  • layoutComplete — вызывается после завершения перерасчета сетки и анимации.

Пример:

iso.on('arrangeComplete', function(filteredItems) {
  console.log('Фильтрация завершена. Элементов:', filteredItems.length);
});

Анимация сортировки

Не только фильтрация, но и сортировка элементов сопровождается анимацией:

iso.arrange({
  sortBy: 'name',
  sortAscending: true
});

Элементы плавно перемещаются в соответствии с заданным порядком. Можно настроить скорость и кривую анимации через transitionDuration и CSS-свойства transition-timing-function.

Комбинированные эффекты фильтрации и сортировки

Можно одновременно фильтровать и сортировать элементы:

iso.arrange({
  filter: '.category-a',
  sortBy: 'price'
});

Все изменения будут анимированы плавно, обеспечивая естественный визуальный переход.

Особенности работы с разными layout mode

  • fitRows — элементы выстраиваются в строки; простая анимация сдвига по оси X и Y.
  • masonry — элементы разной высоты; Isotope рассчитывает вертикальные позиции и анимация выглядит естественной.
  • cellsByRow и vertical — позволяют создавать нестандартные сетки с анимацией.

Производительность анимации

Для больших сеток анимация может нагружать браузер. Рекомендации:

  1. Использовать transform: translate вместо изменения top/left.
  2. Минимизировать количество DOM-элементов одновременно на странице.
  3. Включить will-change: transform для ускорения рендеринга.

Анимация при динамическом добавлении/удалении элементов

// Добавление нового элемента
var newItem = document.createElement('div');
newItem.className = 'grid-item category-b';
grid.appendChild(newItem);

iso.appended(newItem); // добавление с анимацией

// Удаление элемента
iso.remove(itemToRemove);
iso.layout(); // перерасчет с анимацией

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

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

Оглавление