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

Muuri — это мощная библиотека для создания интерактивных сеток с поддержкой drag-and-drop, сортировки, фильтрации и анимации. Одной из ключевых возможностей является анимация при фильтрации элементов сетки. Она позволяет плавно скрывать и отображать элементы, создавая динамичный интерфейс без резких изменений.

Основные принципы анимации

Фильтрация в Muuri работает через метод filter(), который принимает функцию или ключ фильтрации. При изменении фильтрации элементы не просто исчезают или появляются мгновенно — Muuri использует встроенную анимацию для перемещения элементов в новые позиции и плавного скрытия/отображения элементов.

const grid = new Muuri('.grid', {
  layoutDuration: 400,
  layoutEasing: 'ease',
  dragEnabled: true
});

// Применение фильтрации по категории
grid.filter(item => item.getElement().dataset.category === 'js');

Ключевые параметры анимации при фильтрации:

  • layoutDuration — время анимации в миллисекундах для перестановки элементов.
  • layoutEasing — функция сглаживания анимации (например, 'ease', 'ease-in-out', 'linear').
  • showDuration / hideDuration — длительность анимации появления и скрытия элементов.
  • showEasing / hideEasing — функции сглаживания для появления и скрытия.
const grid = new Muuri('.grid', {
  layoutDuration: 500,
  layoutEasing: 'ease-in-out',
  showDuration: 300,
  showEasing: 'ease',
  hideDuration: 300,
  hideEasing: 'ease'
});

Плавное скрытие и отображение элементов

Методы show() и hide() позволяют управлять отдельными элементами сетки. Эти методы автоматически запускают анимацию появления или скрытия.

const items = grid.getItems();

// Скрыть элементы с определённой категорией
items.forEach(item => {
  if(item.getElement().dataset.category !== 'js') {
    item.hide();
  }
});

// Показать элементы определённой категории
items.forEach(item => {
  if(item.getElement().dataset.category === 'js') {
    item.show();
  }
});

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

Фильтрация с сохранением позиции

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

grid.filter(item => item.getElement().dataset.category === 'css');
// Сетка автоматически перестраивается с анимацией

Важно учитывать, что если элементы динамически добавляются или удаляются после фильтрации, необходимо вызывать grid.refreshItems().layout() для корректного расчёта новых позиций и плавной анимации.

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

Muuri поддерживает одновременное применение фильтров и сортировки. Это позволяет сначала отфильтровать элементы, а затем отсортировать оставшиеся по заданному критерию, например, по дате или алфавиту.

grid.filter(item => item.getElement().dataset.category === 'js')
    .sort((a, b) => {
      const aValue = a.getElement().dataset.order;
      const bValue = b.getElement().dataset.order;
      return aValue - bValue;
    });

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

Настройка индивидуальной анимации для элементов

Каждый элемент можно анимировать индивидуально, используя параметры анимации при создании элемента или через события. Muuri поддерживает события showStart, showEnd, hideStart и hideEnd, позволяя запускать кастомные эффекты или синхронизировать анимацию с другими действиями.

grid.on('showStart', (item) => {
  item.getElement().style.transform = 'scale(0.8)';
});
grid.on('showEnd', (item) => {
  item.getElement().style.transform = 'scale(1)';
});

Такой подход позволяет создавать уникальные эффекты появления и скрытия элементов, например, fade-in, slide, zoom или комбинации.

Оптимизация производительности анимации

Для больших сеток важно учитывать производительность:

  • Ограничить количество одновременно анимируемых элементов.
  • Использовать CSS-свойства с аппаратным ускорением (transform, opacity).
  • При массовом обновлении элементов вызывать grid.refreshItems() только один раз после всех изменений.
// Эффективное обновление после массовой фильтрации
grid.refreshItems().layout();

Итоговая структура фильтрации с анимацией

  • Инициализация сетки с параметрами анимации.
  • Применение фильтров через filter() или индивидуальные show()/hide().
  • Использование событий для кастомной анимации элементов.
  • Оптимизация с помощью refreshItems() при динамических изменениях.

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

Оглавление