Очередь анимаций

Dom7 — это легковесная библиотека для работы с DOM, которая часто используется вместе с фреймворком Framework7, но при этом полностью самостоятельна. Одной из мощных возможностей Dom7 является управление последовательностью действий на элементах, включая анимации и визуальные эффекты. Для организации очереди анимаций применяются методы манипуляции классами, CSS-свойствами и встроенные функции библиотеки.

Основы очереди анимаций

Очередь анимаций позволяет последовательно выполнять несколько действий над элементом, обеспечивая плавный переход состояний. Dom7 не имеет встроенного механизма вроде queue из jQuery, но последовательность действий можно реализовать с помощью методов .transition(), .animationEnd(), .addClass(), .removeClass() и колбэков.

Пример базовой последовательности:

const $box = Dom7('.box');

$box
  .addClass('fade-in')
  .transition(500)
  .animationEnd(() => {
    $box.addClass('scale-up');
  });

В этом примере анимация появления элемента (fade-in) длится 500 мс, после чего срабатывает колбэк animationEnd, запускающий следующую анимацию (scale-up). Такой подход позволяет строить цепочки анимаций без использования внешних библиотек.

Методы управления анимацией

.transition(duration) Устанавливает длительность CSS-перехода для элементов. Поддерживает числовое значение в миллисекундах. Применяется к текущему набору элементов Dom7.
```
Dom7('.element').transition(400);
```
.animationEnd(callback) Позволяет выполнить функцию после завершения CSS-анимации. Это основной способ построения очереди, так как колбэк срабатывает только после окончания анимации.
```
Dom7('.box').addClass('slide-in').animationEnd(() => {
  console.log('Анимация завершена');
});
```
.addClass(className) и .removeClass(className) Управление классами позволяет включать CSS-анимации, определённые через @keyframes или transition. Комбинируется с .animationEnd() для последовательного применения эффектов.
```
Dom7('.box')
  .addClass('fade-in')
  .animationEnd(() => {
    Dom7('.box').removeClass('fade-in').addClass('rotate');
  });
```
.css(propertyName, value) Позволяет программно менять стили элемента, включая opacity, transform и другие свойства, необходимые для анимации.
```
Dom7('.box')
  .css('opacity', 0)
  .transition(300)
  .css('opacity', 1);
```

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

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

const $box = Dom7('.box');

$box
  .addClass('fade-in')
  .transition(400)
  .animationEnd(() => {
    $box.addClass('move-right').transition(500).animationEnd(() => {
      $box.addClass('scale-up').transition(300);
    });
  });

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

Использование таймеров для управления очередью

Иногда удобнее комбинировать CSS-анимации с JavaScript-таймерами:

const $box = Dom7('.box');

$box.addClass('fade-in');
setTimeout(() => {
  $box.addClass('move-up');
}, 500);
setTimeout(() => {
  $box.addClass('rotate');
}, 1000);

Недостаток метода в том, что таймеры не учитывают фактическую длительность анимации, поэтому предпочтительнее использовать .animationEnd() для синхронизации.

Встроенные эффекты Dom7

Dom7 предоставляет ряд методов для анимации без явного задания CSS:

.fadeIn(duration) и .fadeOut(duration) Позволяют плавно показывать и скрывать элемент.
```
Dom7('.box').fadeIn(400).animationEnd(() => {
  Dom7('.box').fadeOut(400);
});
```
.slideUp(duration) и .slideDown(duration) Управляют вертикальным сдвигом элемента, создавая эффект раскрытия или сворачивания.
.show() и .hide() Быстрые методы отображения и скрытия, могут комбинироваться с .transition() для плавного эффекта.

Комбинация нескольких методов

Для организации полной очереди анимаций можно комбинировать классы, CSS-свойства и встроенные методы:

const $box = Dom7('.box');

$box
  .fadeIn(300)
  .animationEnd(() => {
    $box.css('transform', 'translateX(100px)').transition(500).animationEnd(() => {
      $box.addClass('rotate').transition(400);
    });
  });

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