Переходы и трансформации

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

Подключение CSS-переходов

Для активации плавного перемещения элементов необходимо использовать CSS-переходы. В Packery это делается следующим образом:

.grid-item {
  transition: transform 0.4s ease, width 0.4s ease, height 0.4s ease;
}
  • transform отвечает за перемещение элементов в сетке.
  • width и height необходимы для анимации изменения размеров элементов.
  • Параметр ease задаёт плавность движения. Можно использовать linear, ease-in, ease-out или cubic-bezier() для более сложных кривых анимации.

Packery автоматически применяет transform: translate(x, y) для перемещения элементов в нужные позиции, поэтому подключение CSS-переходов обеспечивает плавный эффект.

Использование опции transitionDuration

Packery позволяет задавать длительность анимации через опцию transitionDuration при инициализации:

var grid = document.querySelector('.grid');
var pckry = new Packery(grid, {
  itemSelector: '.grid-item',
  gutter: 10,
  transitionDuration: '0.4s'
});
  • Значение может быть в секундах (0.4s) или миллисекундах (400ms).
  • Эта опция задаёт продолжительность анимации всех трансформаций, выполняемых библиотекой.

Отслеживание событий для кастомных анимаций

Packery генерирует события, которые можно использовать для синхронизации с другими эффектами:

  • layoutComplete – срабатывает после завершения перестановки всех элементов.
  • dragItemPositioned – срабатывает после перемещения конкретного элемента при использовании Draggabilly.

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

pckry.on('layoutComplete', function(laidOutItems) {
  console.log('Перестановка завершена', laidOutItems);
});

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

Сочетание с CSS-анимациями

Packery отлично интегрируется с CSS-анимациями. Например, можно анимировать появление элемента при добавлении:

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

.grid-item.is-visible {
  opacity: 1;
  transform: scale(1);
}

И при добавлении элемента через Packery:

var item = document.createElement('div');
item.className = 'grid-item';
grid.appendChild(item);
pckry.appended(item);
item.classList.add('is-visible');

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

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

При динамическом изменении размеров элементов важно обновлять Packery, чтобы пересчитать позиции соседних элементов:

item.style.width = '200px';
item.style.height = '150px';
pckry.layout();

С включёнными CSS-переходами изменения размеров будут плавными. Можно также комбинировать с анимацией перемещения через transitionDuration для более сложных визуальных эффектов.

Совмещение с Draggabilly

Packery поддерживает drag & drop через библиотеку Draggabilly. Плавные трансформации особенно заметны при перетаскивании:

var draggies = [];
var items = grid.querySelectorAll('.grid-item');
items.forEach(function(item) {
  var draggie = new Draggabilly(item);
  pckry.bindDraggabillyEvents(draggie);
  draggies.push(draggie);
});
  • При перемещении элемента Packery автоматически обновляет позиции соседних элементов с анимацией.
  • Можно комбинировать с кастомными событиями для визуальных эффектов при начале и окончании перетаскивания.

Управление временными задержками

Для создания каскадных эффектов при перестройке сетки можно использовать CSS-свойство transition-delay:

.grid-item {
  transition-delay: calc(var(--order) * 50ms);
}
  • Каждому элементу присваивается порядковый номер через CSS-переменную --order.
  • Элементы будут перемещаться с небольшими временными интервалами, создавая эффект волны.

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

  • Использовать transform: translate() вместо top/left для перемещений.
  • Минимизировать количество анимируемых свойств (лучше только transform и opacity).
  • Ограничивать количество одновременно анимируемых элементов, чтобы не перегружать рендеринг.

Итоговые возможности

Packery с использованием переходов и трансформаций позволяет реализовать:

  • Плавное перемещение элементов при изменении сетки.
  • Анимацию появления и исчезновения элементов.
  • Плавное изменение размеров с сохранением структуры сетки.
  • Интеграцию с drag & drop и кастомными эффектами.
  • Создание каскадных и последовательных анимаций с помощью задержек.

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

Оглавление