Колбэки после завершения анимации

Umbrella JS предоставляет лёгкий и лаконичный способ работы с анимациями в DOM. Одним из ключевых инструментов для управления поведением элементов после анимации являются колбэки, которые позволяют выполнять функции после завершения визуальных эффектов, сохраняя код чистым и управляемым.

Основы анимаций в Umbrella JS

Umbrella JS реализует анимации через метод .animate(). Этот метод принимает два основных параметра:

  1. Объект с CSS-свойствами, которые необходимо анимировать.
  2. Настройки анимации, включающие длительность (duration) и функцию колбэка (complete).

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

u('.box').animate(
  { opacity: 0, left: '100px' },
  {
    duration: 500,
    complete: function() {
      console.log('Анимация завершена');
    }
  }
);

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

Сигнатура колбэка

Колбэк, передаваемый через параметр complete, вызывается один раз после завершения анимации каждого выбранного элемента. Если селектор охватывает несколько элементов, функция будет вызвана для каждого из них отдельно, сохраняя контекст this, указывающий на текущий элемент DOM:

u('.item').animate(
  { height: '200px' },
  {
    duration: 300,
    complete: function() {
      this.style.backgroundColor = 'yellow';
    }
  }
);

В этом случае каждый элемент с классом .item после анимации увеличения высоты получит желтый фон.

Использование анонимных и именованных функций

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

function highlight(element) {
  element.style.border = '2px solid red';
}

u('.card').animate(
  { opacity: 0.5 },
  { duration: 400, complete: highlight }
);

При использовании именованной функции complete Umbrella JS передает в неё DOM-элемент как аргумент, что позволяет работать напрямую с элементом без необходимости использовать this.

Последовательные анимации

Колбэки особенно полезны для создания цепочек анимаций, где каждая последующая анимация начинается только после завершения предыдущей:

u('.circle').animate(
  { left: '200px' },
  {
    duration: 500,
    complete: function() {
      u(this).animate({ top: '100px' }, { duration: 300 });
    }
  }
);

В этом примере сначала выполняется сдвиг по оси X, а после его завершения элемент поднимается по оси Y. Такая последовательность позволяет избегать конфликтов и наложений анимаций.

Анимации с несколькими свойствами

Колбэки сохраняют надежность независимо от количества анимируемых свойств:

u('.panel').animate(
  { width: '300px', opacity: 1, marginTop: '20px' },
  {
    duration: 600,
    complete: function() {
      console.log('Все свойства анимированы');
    }
  }
);

Метод .animate() гарантирует, что complete сработает только после завершения всех изменений.

Условная логика внутри колбэка

Колбэки могут содержать условные конструкции и логические проверки для динамического поведения:

u('.alert').animate(
  { opacity: 0 },
  {
    duration: 400,
    complete: function() {
      if (this.classList.contains('important')) {
        alert('Важное уведомление скрыто');
      }
    }
  }
);

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

Особенности работы с множественными элементами

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

const items = u('.list-item');
let completed = 0;

items.animate({ opacity: 0 }, {
  duration: 500,
  complete: function() {
    completed++;
    if (completed === items.length) {
      console.log('Все элементы анимированы');
    }
  }
});

Анимации и промисы

Umbrella JS не использует нативные промисы для .animate(), но можно обернуть колбэк в промис для интеграции с асинхронным кодом:

function animatePromise(element, props, duration) {
  return new Promise(resolve => {
    u(element).animate(props, { duration: duration, complete: resolve });
  });
}

animatePromise('.box', { left: '150px' }, 400)
  .then(() => animatePromise('.box', { opacity: 0.5 }, 300));

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

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

  • Колбэк complete вызывается после завершения анимации каждого элемента.
  • Контекст this внутри колбэка указывает на DOM-элемент, подвергшийся анимации.
  • Использование колбэков позволяет строить цепочки анимаций и добавлять интерактивное поведение после визуальных эффектов.
  • Для работы с группами элементов можно использовать счетчик или оборачивать колбэк в промис, чтобы получить единый обработчик после завершения всех анимаций.
  • Колбэки применимы к анимациям с одним или несколькими свойствами, не влияя на корректность выполнения.

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

Оглавление