Анимация появления элементов

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

Настройка анимации при добавлении элементов

Для управления анимацией появления используется опция showDuration в конфигурации сетки. Она задаёт продолжительность анимации появления элемента в миллисекундах. По умолчанию значения нет, и элементы появляются мгновенно.

const grid = new Muuri('.grid', {
  showDuration: 400, // продолжительность анимации в мс
  showEasing: 'ease', // функция плавности анимации
});
  • showDuration — число, задающее длительность анимации появления элемента.
  • showEasing — CSS-функция для плавности анимации (ease, linear, ease-in-out и т.д.).
  • showing — событие, которое срабатывает в момент начала анимации показа элемента.
grid.on('showing', (item) => {
  console.log('Элемент появляется:', item.getElement());
});

Пошаговое добавление элементов с анимацией

Чтобы элементы появлялись последовательно, можно использовать метод show каждого элемента отдельно с задержкой:

const items = grid.getItems();
items.forEach((item, index) => {
  setTimeout(() => {
    grid.show(item);
  }, index * 100); // задержка между появлениями элементов
});

Здесь index * 100 задаёт интервал в 100 мс между появлением соседних элементов, создавая эффект «стадного» появления.

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

Аналогично появляется возможность анимированного удаления элементов с использованием метода hide. Продолжительность и плавность задаются через hideDuration и hideEasing.

grid.hide(item, {
  duration: 300,
  easing: 'ease-in-out'
});
  • hideDuration — длительность анимации скрытия.
  • hideEasing — функция плавности для анимации исчезновения.
  • Событие hiding позволяет отслеживать момент начала анимации скрытия.
grid.on('hiding', (item) => {
  console.log('Элемент скрывается:', item.getElement());
});

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

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

grid.filter((item) => item.getElement().dataset.category === 'category1', {
  layout: 'instant' // или 'default' для анимации
});

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

Настройка пользовательской анимации с использованием CSS

Для более сложной анимации можно комбинировать возможности Muuri с CSS-переходами. Например, можно задать начальное состояние элементов как прозрачное и уменьшенное, а затем при показе изменять свойства opacity и transform:

.grid-item {
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

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

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

События для кастомного контроля анимации

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

  • showing — элемент начинает появляться.
  • shown — элемент полностью показан.
  • hiding — элемент начинает исчезать.
  • hidden — элемент полностью скрыт.

Пример использования:

grid.on('shown', (item) => {
  item.getElement().classList.add('highlight');
});

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

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

  • Для сеток с большим количеством элементов рекомендуется использовать пошаговое появление с небольшими задержками, чтобы избежать перегрузки анимациями.
  • Комбинирование JS-анимации Muuri и CSS-переходов обеспечивает более плавное и гибкое управление визуальными эффектами.
  • События showing и shown полезны для триггеров дополнительных эффектов, например, появления подписи или изменения цвета.

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

Оглавление