Анимация добавления и удаления классов

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

Работа с CSS-классами

Ключевой подход — использование классов, содержащих конечные состояния анимации. Например, создаются классы .active, .hidden, .highlight, которые задают определённые CSS-свойства:

.box {
  width: 100px;
  height: 100px;
  background-color: blue;
  opacity: 1;
  transition: all 0.5s ease;
}

.box.active {
  transform: scale(1.5);
  background-color: red;
  opacity: 0.5;
}

Anime.js позволяет анимировать эти изменения без ручного расчёта промежуточных состояний: библиотека автоматически создаёт плавный переход от текущих значений CSS к значениям, заданным новым классом.

Добавление класса с анимацией

Для добавления класса с анимацией используется метод anime() с указанием свойства, соответствующего конечным значениям класса. Прямого метода addClass в anime.js нет, но можно реализовать аналог через последовательность действий:

const element = document.querySelector('.box');

element.classList.add('active');

anime({
  targets: element,
  scale: 1.5,
  backgroundColor: '#ff0000',
  opacity: 0.5,
  duration: 800,
  easing: 'easeInOutQuad'
});

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

  • targets указывает на элементы, к которым применяется анимация.
  • Свойства scale, backgroundColor, opacity должны соответствовать стилям класса .active.
  • duration и easing задают время и кривую плавности анимации.

Этот подход позволяет синхронизировать CSS-класс с JavaScript-анимацией, что даёт гибкость и управляемость.

Удаление класса с анимацией

Удаление класса требует обратного процесса: сначала анимируются свойства текущего класса, затем класс удаляется. Это предотвращает резкий визуальный “скачок”.

anime({
  targets: element,
  scale: 1,
  backgroundColor: '#0000ff',
  opacity: 1,
  duration: 600,
  easing: 'easeOutQuad',
  complete: () => {
    element.classList.remove('active');
  }
});

Особенности реализации:

  • complete — коллбэк, который срабатывает после завершения анимации.
  • Свойства анимации задаются в соответствии с исходным состоянием элемента до применения класса.
  • Такой подход гарантирует плавный возврат к начальному виду.

Комбинация добавления и удаления классов

Anime.js позволяет создавать цепочки анимаций через timeline, что идеально подходит для последовательного добавления и удаления классов:

const tl = anime.timeline({
  easing: 'easeInOutQuad',
  duration: 500
});

tl
.add({
  targets: element,
  scale: 1.5,
  backgroundColor: '#ff0000',
  opacity: 0.5,
  begin: () => element.classList.add('active')
})
.add({
  targets: element,
  scale: 1,
  backgroundColor: '#0000ff',
  opacity: 1,
  complete: () => element.classList.remove('active')
});

Преимущества timeline:

  • Позволяет объединять несколько анимаций в один поток.
  • Поддерживает точную синхронизацию начала и конца анимации классов.
  • Облегчает управление сложными последовательностями эффектов.

Динамическое определение свойств через CSS

Для повышения удобства можно считывать текущие стили элемента и вычислять конечные значения автоматически:

const styles = getComputedStyle(element);

anime({
  targets: element,
  scale: styles.transform === 'none' ? 1 : 1.5,
  backgroundColor: styles.backgroundColor,
  opacity: parseFloat(styles.opacity),
  duration: 700,
  easing: 'easeInOutCubic'
});

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

Практические рекомендации

  1. Использовать transition в CSS только как резерв: anime.js полностью управляет плавностью.
  2. Согласовывать свойства анимации с теми, которые изменяет CSS-класс.
  3. Использовать timeline для сложных цепочек добавления/удаления классов.
  4. Применять коллбэки begin и complete для синхронизации с DOM-операциями.
  5. Динамически считывать текущие значения через getComputedStyle для более гибкой анимации.

Итоговая структура работы

  • Определение начального состояния CSS.
  • Создание классов для конечных состояний.
  • Анимация через anime.js с точным указанием свойств, соответствующих классу.
  • Использование timeline и коллбэков для последовательного добавления и удаления классов.

Этот подход обеспечивает чистый и управляемый способ анимации классов, объединяя возможности CSS и JavaScript-анимаций с высокой производительностью и плавностью.

Оглавление