transitionDuration

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

Формат и тип значения

transitionDuration принимает значения в формате CSS-свойства transition-duration. Это может быть:

  • Строка с единицами времени: "0.4s", "400ms".
  • Число: 400 — в миллисекундах (эквивалент "400ms").

Пример установки при инициализации Masonry:

const grid = document.querySelector('.grid');
const msnry = new Masonry(grid, {
  itemSelector: '.grid-item',
  columnWidth: 200,
  gutter: 10,
  transitionDuration: '0.6s'
});

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

Использование с динамическими изменениями

transitionDuration можно изменять после инициализации Masonry, обновляя параметры анимации в зависимости от условий:

msnry.options.transitionDuration = '0.2s';
msnry.layout(); // Применение нового времени анимации

Такой подход полезен при адаптивной верстке или при необходимости ускорить анимацию на мобильных устройствах.

Особенности работы анимации

  1. Элементы, добавляемые динамически: Masonry автоматически применяет текущую transitionDuration к вновь добавленным элементам, если вызывается метод appended().
  2. Удаление элементов: При вызове remove() элементы плавно исчезают с анимацией длительностью, заданной transitionDuration.
  3. Сочетание с CSS-трансформациями: Masonry использует свойства transform (translate3d) для перемещения элементов, что обеспечивает GPU-ускорение анимации.
.grid-item {
  transition-property: transform;
  transition-timing-function: ease;
}

Эта настройка CSS совместно с transitionDuration позволяет добиться максимально плавного эффекта перемещения.

Поддержка значений 0 и отключение анимации

Для мгновенного изменения положения элементов без анимации можно установить transitionDuration в "0s" или 0:

msnry.options.transitionDuration = 0;
msnry.layout();

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

Связь с другими параметрами Masonry

  • layout: Любое перестроение сетки использует текущую длительность анимации.
  • percentPosition: В комбинации с процентными размерами элементов, анимация с transitionDuration обеспечивает плавное масштабирование и перемещение.
  • gutter и columnWidth: Изменение этих параметров автоматически запускает анимацию с установленной длительностью.

Примеры практического применения

  1. Плавная фильтрация элементов:
const filters = document.querySelectorAll('.filter-button');
filters.forEach(btn => {
  btn.addEventListener('click', () => {
    const category = btn.dataset.category;
    const items = document.querySelectorAll('.grid-item');
    items.forEach(item => {
      item.style.display = item.dataset.category === category ? 'block' : 'none';
    });
    msnry.layout();
  });
});

Установка transitionDuration: '0.5s' обеспечит плавное перемещение оставшихся элементов при фильтрации.

  1. Адаптивная сетка с разной скоростью анимации:
if(window.innerWidth < 768) {
  msnry.options.transitionDuration = '0.2s';
} else {
  msnry.options.transitionDuration = '0.6s';
}
msnry.layout();

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

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

  • Минимизировать длительность анимации при большом количестве элементов для производительности.
  • Использовать числа в миллисекундах для динамического изменения, так как это упрощает вычисления.
  • Сочетать с CSS-свойствами transition-timing-function для достижения нужного визуального эффекта (ease, linear, cubic-bezier).

transitionDuration является ключевым инструментом для настройки визуальной динамики сетки Masonry и позволяет гибко управлять скоростью перемещения элементов при любых изменениях.

Оглавление