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

Библиотека Muuri предоставляет мощный инструмент для построения гибких сеток с возможностью динамического управления элементами. Управление видимостью элементов реализуется через методы фильтрации и скрытия, которые позволяют добавлять или удалять элементы из визуального отображения сетки без их удаления из DOM.

Для начала необходимо создать экземпляр сетки:

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

Здесь .grid — это контейнер элементов сетки. Опции layoutDuration и layoutEasing задают анимацию перестроения сетки, а dragEnabled включает возможность перетаскивания элементов.

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

Muuri использует два подхода к управлению видимостью:

  1. Скрытие элементов через метод hide

Метод hide скрывает элементы с анимацией, но оставляет их в DOM и в массиве элементов сетки:

const items = grid.getItems(); // Получение всех элементов сетки
const firstItem = items[0];

grid.hide(firstItem, {
  layout: {
    duration: 300,
    easing: 'ease-in-out'
  }
});

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

  • Элемент остается в сетке и может быть снова показан через show.
  • Можно указать параметры анимации через объект layout.
  1. Показ элементов через метод show
grid.show(firstItem, {
  layout: {
    duration: 300,
    easing: 'ease-in-out'
  }
});

Метод show возвращает элемент в видимую сетку, с учетом анимации и текущего расположения других элементов.

  1. Фильтрация элементов через метод filter

Метод filter позволяет показывать или скрывать элементы по заданному критерию:

grid.filter(item => item.getElement().dataset.category === 'featured', {
  layout: {
    duration: 500,
    easing: 'ease'
  }
});

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

  • filter принимает функцию обратного вызова, которая возвращает true для видимых элементов и false для скрытых.
  • Фильтр не удаляет элементы из сетки, они остаются в DOM и могут быть восстановлены при изменении фильтра.
  • Можно комбинировать фильтрацию с методами show и hide для гибкого управления отдельными элементами.

Управление видимостью по классам и атрибутам

Скрытие элементов через CSS-классы — распространенный способ интеграции Muuri с внешними стилями. Например:

const items = grid.getItems();

items.forEach(item => {
  const el = item.getElement();
  if (el.classList.contains('hidden')) {
    grid.hide(item, { layout: { duration: 200 } });
  }
});
  • Класс hidden может управляться через другие скрипты или события.
  • Использование классов позволяет легко синхронизировать состояние видимости с CSS-анимациями и медиа-запросами.

Динамическое управление элементами

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

document.querySelector('#toggle-featured').addEventListener('click', () => {
  grid.getItems().forEach(item => {
    if (item.getElement().dataset.category === 'featured') {
      if (item.isVisible()) {
        grid.hide(item, { layout: { duration: 300 } });
      } else {
        grid.show(item, { layout: { duration: 300 } });
      }
    }
  });
});

Здесь:

  • isVisible() проверяет текущее состояние элемента.
  • Комбинация методов hide и show обеспечивает плавное переключение без перезагрузки сетки.

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

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

grid.filter(item => item.getElement().dataset.category !== 'archived')
    .sort('asc', (a, b) => {
      return a.getElement().dataset.order - b.getElement().dataset.order;
    });
  • filter управляет видимостью элементов по категориям.
  • sort изменяет порядок отображения с учетом только видимых элементов.
  • Анимации применяются автоматически к изменениям позиции и видимости.

Оптимизация производительности при большом количестве элементов

При работе с сотнями элементов важно учитывать следующие моменты:

  • Использовать метод show и hide для отдельных элементов, а не пересоздавать сетку.
  • Применять фильтры группами, чтобы минимизировать количество перестроений:
grid.hide(grid.getItems().filter(item => !item.getElement().dataset.active), { layout: { duration: 200 } });
  • Настраивать параметры анимации layoutDuration и layoutEasing для оптимального баланса между плавностью и скоростью обновления.

Адаптация под динамический контент

Muuri позволяет добавлять новые элементы в сетку и управлять их видимостью:

const newItem = document.createElement('div');
newItem.className = 'item';
newItem.dataset.category = 'new';
document.querySelector('.grid').appendChild(newItem);

grid.add(newItem);
grid.show(grid.getItems().slice(-1)[0], { layout: { duration: 400 } });

Особенности:

  • Новый элемент сразу добавляется в DOM и сетку.
  • Можно управлять его видимостью через show или фильтрацию.
  • Поддерживается плавная анимация появления без перерисовки всей сетки.

События, связанные с видимостью

Muuri генерирует события при изменении состояния элементов:

grid.on('show', item => {
  console.log('Элемент показан:', item.getElement());
});

grid.on('hide', item => {
  console.log('Элемент скрыт:', item.getElement());
});
  • Позволяет синхронизировать другие интерфейсные элементы (например, счетчики видимых элементов).
  • События можно использовать для логики динамического подгруза контента и анимаций.

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

Оглавление