Параметры анимации

Библиотека Isotope предоставляет гибкие возможности для управления анимацией при фильтрации, сортировке и изменении размеров элементов сетки. Настройка анимации осуществляется через объект animationOptions, который позволяет детально контролировать продолжительность, тип easing и задержки анимационных эффектов.

Основные свойства animationOptions

  1. duration Задает длительность анимации в миллисекундах.

    var $grid = $('.grid').isotope({
  itemSelector: '.grid-item',
  layoutMode: 'fitRows',
  animationOptions: {
    duration: 800
  }
});

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

  2. easing Определяет функцию ускорения анимации. Isotope поддерживает стандартные CSS функции easing, а также jQuery easing, если подключен соответствующий плагин.

    animationOptions: {
  duration: 600,
  easing: 'ease-in-out'
}

    Популярные варианты: linear, ease, ease-in, ease-out, ease-in-out, а для jQuery можно использовать swing, easeInQuad, easeOutBounce и другие.

  3. queue Логическое значение, указывающее, будет ли анимация ставиться в очередь.

    animationOptions: {
  duration: 500,
  queue: false
}

    Если queue установлено в false, все элементы начинают анимацию одновременно. При значении true анимации элементов выполняются последовательно.

Анимация при фильтрации и сортировке

При изменении фильтрации или сортировки сетки Isotope применяет анимацию к элементам, которые появляются, исчезают или меняют положение. Настройка параметров animationOptions влияет на весь процесс:

  • Фильтрация элементов: элементы, не соответствующие фильтру, плавно исчезают, а новые — появляются.
  • Сортировка элементов: порядок элементов меняется с плавной анимацией перемещения.
$grid.isotope({
  filter: '.category-a',
  animationOptions: {
    duration: 700,
    easing: 'ease-out',
    queue: false
  }
});

В данном примере фильтрация .category-a будет происходить за 700 мс с функцией ускорения ease-out, без последовательной очереди.

Настройка индивидуальной анимации для каждого элемента

Isotope позволяет задавать разные анимации для отдельных элементов, используя CSS-переходы или динамическое изменение transition-duration через JavaScript.

$('.grid-item').each(function(i) {
  var delay = i * 50; // задержка по 50 мс для каждого элемента
  $(this).css({
    transitionDuration: (0.5 + i*0.1) + 's'
  });
});

Такой подход позволяет создавать эффект “волны” или последовательного появления элементов при фильтрации.

Дополнительные параметры анимации

  1. stagger Свойство stagger задает интервал задержки между анимациями элементов. Поддерживается начиная с версии Isotope, использующей transitionDuration для CSS-переходов.

  2. hiddenStyle и visibleStyle Используются для определения конечных стилей элементов при их скрытии и отображении. Например:

    $grid.isotope({
  hiddenStyle: { opacity: 0, transform: 'scale(0.5)' },
  visibleStyle: { opacity: 1, transform: 'scale(1)' },
  animationOptions: { duration: 600, easing: 'ease-in-out' }
});

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

  3. percentPosition В сочетании с анимацией влияет на корректное позиционирование элементов, особенно при адаптивной сетке. Установка percentPosition: true обеспечивает плавное масштабирование элементов при изменении размера контейнера.

Примеры продвинутой анимации

Комбинация фильтрации и задержки:

var $grid = $('.grid').isotope({
  itemSelector: '.grid-item',
  layoutMode: 'masonry',
  hiddenStyle: { opacity: 0, transform: 'scale(0.3)' },
  visibleStyle: { opacity: 1, transform: 'scale(1)' },
  transitionDuration: '0.7s'
});

$('.filter-button').on('click', function() {
  var filterValue = $(this).attr('data-filter');
  $grid.isotope({
    filter: filterValue,
    stagger: 100
  });
});

В этом примере элементы появляются с постепенным увеличением масштаба и задержкой 100 мс между соседними элементами.

Анимация сортировки с различными easing:

$grid.isotope({
  sortBy: 'name',
  animationOptions: {
    duration: 1000,
    easing: 'ease-out'
  }
});

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

Понимание и грамотная настройка параметров анимации в Isotope позволяет создавать динамичные, визуально привлекательные интерфейсы, где фильтрация и сортировка элементов происходят естественно и органично. Контроль над duration, easing, queue, hiddenStyle, visibleStyle и stagger дает полный спектр возможностей для тонкой настройки поведения сетки.

Оглавление