transitionDuration

Свойство transitionDuration в библиотеке Packery управляет скоростью анимации при перестройке элементов сетки. Оно определяет, сколько времени занимает переход одного элемента из одного положения в другое при добавлении, удалении или перемещении элементов.

Формат и допустимые значения

transitionDuration принимает следующие типы значений:

  1. Число в миллисекундах

    transitionDuration: 400

    Значение 400 указывает, что анимация будет длиться 400 миллисекунд.

  2. Строка с CSS-совместимым форматом времени

    transitionDuration: '0.4s'

    Можно использовать секунды (s) или миллисекунды (ms), например '200ms' или '1s'.

  3. 0 или '0s' для отключения анимации Полное отсутствие анимации при перестройке элементов:

    transitionDuration: 0

Принцип работы

Packery использует transitionDuration совместно с CSS-свойством transition для плавного перемещения элементов. При изменении положения одного или нескольких элементов:

  • Библиотека вычисляет новое положение каждого элемента в сетке.
  • Packery применяет к каждому элементу CSS-переход с указанной длительностью.
  • Элемент плавно перемещается на новое место, создавая эффект “упорядоченной хаотичности”.

Если transitionDuration равен нулю, элементы переставляются мгновенно, без анимации.

Настройка через параметры при инициализации

При создании экземпляра Packery свойство указывается внутри объекта опций:

var grid = document.querySelector('.grid');
var pckry = new Packery(grid, {
  itemSelector: '.grid-item',
  gutter: 10,
  transitionDuration: '0.5s'
});

В этом примере каждый элемент сетки будет плавно перемещаться в течение 0.5 секунды при перестроении.

Изменение значения после инициализации

transitionDuration можно динамически изменять после создания Packery:

pckry.options.transitionDuration = '1s';
pckry.layout(); // Перестроение элементов с новой длительностью

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

Влияние на производительность

  • Большие значения transitionDuration делают анимацию медленной, что может создавать эффект “торможения” интерфейса.
  • Малые значения ускоряют визуальную реакцию, но делают движение элементов резким.
  • Для сеток с большим количеством элементов рекомендуется выбирать умеренные значения (0.2–0.5 секунды), чтобы сохранить плавность без перегрузки браузера.

Совместное использование с transitionProperty

Packery применяет CSS-свойство transform для анимации позиции элементов. Настройка transitionDuration корректно работает с:

.grid-item {
  transition-property: transform, opacity;
}

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

Примеры

Мгновенное перемещение:

var pckry = new Packery('.grid', {
  itemSelector: '.grid-item',
  transitionDuration: 0
});

Медленная анимация для акцентирования:

var pckry = new Packery('.grid', {
  itemSelector: '.grid-item',
  transitionDuration: '1s'
});

Динамическая смена скорости:

pckry.options.transitionDuration = '0.3s';
pckry.layout();

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

  • transitionDuration определяет время анимации перестановки элементов.
  • Поддерживает значения в миллисекундах или CSS-формате секунд.
  • Значение 0 отключает анимацию.
  • Может изменяться динамически после инициализации.
  • Влияет на плавность и восприятие интерфейса, особенно при работе с большим количеством элементов.

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

Оглавление