CSS-классы элементов

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

Основные классы, используемые Muuri

Muuri автоматически добавляет к каждому элементу сетки определённые CSS-классы. Они отражают текущее состояние элемента и могут использоваться для стилизации.

  1. muuri-item Присваивается каждому элементу сетки при инициализации. Этот класс является базовым и позволяет задавать общие стили для всех элементов:

    .muuri-item {
    margin: 10px;
    transition: transform 0.4s ease;
}

  2. muuri-item-dragging Активен в момент перетаскивания элемента. Часто используют для изменения внешнего вида перетаскиваемого блока:

    .muuri-item-dragging {
    z-index: 1000;
    opacity: 0.8;
    cursor: grabbing;
}

  3. muuri-item-hidden Присваивается элементу при его скрытии через методы фильтрации или вручную:

    .muuri-item-hidden {
    pointer-events: none;
    opacity: 0;
}

  4. muuri-item-releasing Включается после завершения перетаскивания, до того как элемент займёт своё новое место в сетке:

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

  5. muuri-item-shown Присваивается элементу при его повторном отображении после фильтрации:

    .muuri-item-shown {
    opacity: 1;
    pointer-events: auto;
}

Настройка пользовательских классов

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

const grid = new Muuri('.grid', {
    items: '.grid-item',
    itemClass: 'custom-item'
});

После этого каждый элемент сетки будет содержать как muuri-item, так и custom-item. Это даёт возможность применять уникальные стили без вмешательства в стандартные классы Muuri.

Управление классами через API

Для динамического изменения состояния элементов можно использовать методы API:

  1. addClass и removeClass Позволяют добавлять или удалять классы конкретному элементу:

    const item = grid.getItem(element);
item.getElement().classList.add('highlighted');
item.getElement().classList.remove('highlighted');

  2. show и hide Автоматически управляют классами muuri-item-hidden и muuri-item-shown:

    grid.hide(item); // добавит muuri-item-hidden
grid.show(item); // удалит muuri-item-hidden и добавит muuri-item-shown

  3. События для классов Muuri генерирует события, которые можно использовать для динамического применения стилей:

    • dragStart → можно добавить пользовательский класс перетаскивания.
    • dragReleaseEnd → удалить класс перетаскивания.
    • show / hide → применять анимации или дополнительные визуальные эффекты.

Пример использования событий для изменения классов:

grid.on('dragStart', function(item) {
    item.getElement().classList.add('active-drag');
});

grid.on('dragReleaseEnd', function(item) {
    item.getElement().classList.remove('active-drag');
});

Анимации и переходы через классы

CSS-классы Muuri тесно связаны с анимациями. Например:

.muuri-item {
    transition: transform 0.5s ease, opacity 0.5s ease;
}

.muuri-item-hidden {
    opacity: 0;
    transform: scale(0.8);
}

.muuri-item-shown {
    opacity: 1;
    transform: scale(1);
}

Используя классы muuri-item-hidden и muuri-item-shown, можно создавать плавные эффекты появления и исчезновения элементов без необходимости ручного расчёта трансформаций.

Практические рекомендации

  • Комбинирование классов: никогда не удаляйте базовый класс muuri-item, это нарушает работу сетки.
  • Минимизация inline-стилей: изменения через классы удобнее для масштабирования и поддержки.
  • Использование событий: для сложных эффектов лучше применять события Muuri вместо постоянного изменения DOM вручную.
  • Анимации через transition: Muuri автоматически управляет трансформациями, поэтому CSS-переходы должны сочетаться с внутренними анимациями библиотеки.

CSS-классы элементов в Muuri — это мощный инструмент для контроля визуального состояния сетки, её анимаций и поведения при интерактивных действиях. Правильное использование этих классов позволяет создавать гибкие и производительные интерфейсы с минимальной нагрузкой на JavaScript.

Оглавление