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

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

Пример базовой инициализации с анимацией:

var grid = document.querySelector('.grid');
var iso = new Isotope(grid, {
  itemSelector: '.grid-item',
  layoutMode: 'masonry',
  transitionDuration: '0.6s',
});
  • itemSelector — CSS-селектор элементов, которые будут анимироваться.
  • layoutMode — определяет способ расположения элементов (masonry, fitRows, packery).
  • transitionDuration — время анимации в секундах или миллисекундах.

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

var newItems = document.querySelectorAll('.new-item');
iso.appended(newItems);

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

Isotope позволяет управлять анимацией появления не только через встроенные настройки, но и через CSS. Для этого используется класс isotope-item и дополнительные классы состояния, например is-showing или is-hidden.

Пример CSS-анимации появления:

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

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

В JavaScript можно вручную управлять классами:

images.forEach(item => {
  item.classList.add('is-showing');
  iso.appended(item);
});

Ключевой момент: Isotope автоматически добавляет класс isotope-item к каждому элементу, а все дополнительные классы позволяют создавать индивидуальные эффекты анимации появления.

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

При фильтрации элементов Isotope плавно скрывает или показывает элементы, используя transitionDuration. Для более сложных анимаций можно комбинировать с CSS:

var filters = document.querySelectorAll('.filter-button');

filters.forEach(button => {
  button.addEventListener('click', () => {
    var filterValue = button.getAttribute('data-filter');
    iso.arrange({ filter: filterValue });
  });
});

CSS-анимация скрытия может выглядеть так:

.grid-item {
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.grid-item.is-hidden {
  opacity: 0;
  transform: scale(0.5);
  pointer-events: none;
}

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

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

Isotope позволяет сортировать элементы по атрибутам, например data-order. Переходы между позициями элементов также анимируются через transitionDuration.

Пример сортировки с анимацией:

iso.arrange({
  sortBy: 'original-order' // или 'name', 'price', 'date'
});

Если требуется анимация с задержкой для каждого элемента, можно использовать CSS-переменные или Jav * aScript:

.grid-item {
  transition: transform 0.6s ease, opacity 0.6s ease;
}

.grid-item:nth-child(1) { transition-delay: 0s; }
.grid-item:nth-child(2) { transition-delay: 0.05s; }
.grid-item:nth-child(3) { transition-delay: 0.1s; }
/* и так далее */

Задержки создают эффект последовательного появления или смещения элементов.

Динамическая загрузка и анимация

При динамическом добавлении элементов (например, подгрузка через AJAX) важно:

  1. Добавить элементы в DOM.
  2. Инициализировать Isotope на новых элементах через appended.
  3. Применить CSS-классы для анимации появления.

Пример:

fetch('/load-items')
  .then(response => response.json())
  .then(data => {
    var fragment = document.createDocumentFragment();
    data.forEach(itemData => {
      var item = document.createElement('div');
      item.classList.add('grid-item', 'is-showing');
      item.textContent = itemData.title;
      fragment.appendChild(item);
    });
    grid.appendChild(fragment);
    iso.appended(fragment.children);
  });

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

Комбинирование с библиотеками анимации

Для сложных эффектов можно сочетать Isotope с библиотеками анимации, например GSAP. Это позволяет контролировать скорость, задержку и траекторию движения элементов при появлении:

gsap.from('.grid-item', {
  opacity: 0,
  y: 50,
  stagger: 0.1,
  duration: 0.6,
  ease: "power2.out"
});

Затем элементы добавляются в Isotope:

iso.layout();

Такое сочетание даёт плавное, высоко кастомизируемое появление элементов и расширяет возможности стандартной анимации Isotope.

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

  • Использовать will-change: transform, opacity для элементов, чтобы GPU рендеринг ускорял анимацию.
  • Минимизировать количество одновременно анимируемых элементов.
  • Настраивать transitionDuration исходя из количества элементов и скорости взаимодействия пользователя.

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

Оглавление