Анимация скрытия элементов

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

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

// Пример базового скрытия элемента
grid.getItem(element).hide({
  duration: 400,    // длительность анимации в миллисекундах
  easing: 'ease',  // тип кривой ускорения
});
  • duration — контролирует скорость исчезновения.
  • easing — задает кривую ускорения анимации. Поддерживаются стандартные CSS-переходы (linear, ease-in-out, ease, cubic-bezier и др.).
  • complete — функция обратного вызова, которая выполняется после завершения анимации, что полезно для дополнительных действий, например удаления элемента из DOM.
grid.getItem(element).hide({
  duration: 500,
  easing: 'ease-in-out',
  complete: function() {
    console.log('Элемент скрыт');
  }
});

Анимация с использованием классов CSS

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

.hidden {
  opacity: 0;
  transform: scale(0.5);
  transition: all 0.4s ease;
}
grid.getItem(element).hide({
  instant: false,
  onHide: function(item) {
    item.getElement().classList.add('hidden');
  }
});
  • instant — если true, скрытие происходит мгновенно, без анимации.
  • onHide — позволяет вставить собственную логику или класс для плавного исчезновения элемента.

Скрытие нескольких элементов одновременно

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

const itemsToHide = grid.getItems().filter(item => item.getElement().dataset.category === 'archive');

itemsToHide.forEach(item => {
  item.hide({
    duration: 300,
    easing: 'ease-out'
  });
});
  • Сначала элементы фильтруются по нужным признакам (например, категория или состояние).
  • Затем каждому элементу назначается анимация скрытия.
  • Это позволяет динамически управлять видимостью элементов без перерисовки всей сетки.

Обратное появление элементов

Метод show используется для обратного эффекта, возвращая элемент на сетку с плавной анимацией. Параметры duration, easing и complete работают аналогично скрытию:

grid.getItem(element).show({
  duration: 400,
  easing: 'ease-in'
});

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

Настройка задержек и последовательности

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

const items = grid.getItems();

items.forEach((item, index) => {
  setTimeout(() => {
    item.hide({
      duration: 300,
      easing: 'ease-out'
    });
  }, index * 100); // задержка 100 мс между элементами
});
  • Такой подход создаёт эффект «падающей сетки», когда элементы исчезают один за другим.
  • Используется для плавных визуальных эффектов и повышения восприятия анимации.

Управление скрытыми элементами в сетке

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

  • getItems('hidden') — получение списка всех скрытых элементов.
  • show — возвращение элемента в сетку.
  • hide с instant: true — мгновенное скрытие без анимации, полезно для предварительной настройки сетки.

Продвинутые эффекты анимации

  • Использование scale и opacity одновременно для создания эффекта «исчезания с уменьшением».
  • Применение transform translate для смещения элемента при скрытии, создавая иллюзию движения.
  • Сочетание анимации скрытия с фильтрацией и сортировкой сетки через filter и sort у Muuri.
grid.filter(item => !item.getElement().classList.contains('hidden'));
grid.sort('original-order');

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

Оглавление