duration забыл же, сколько классу висеть на элементе когда он в очереди

@JiLiZART да, я не все параметры включил :) Набросал примерный вид API. Он может ещё кучу раз измениться.

В передаваемый объект можно будет добавить параметры: speed, delay и т.д.

Нужно подумать над speed/duration, т.к. это взаимозаменяемые параметры. duration по идее имеет более высокий приоритет, т.к. будет инлайниться, но может использоваться и как параметр speed: {duration: 100}

а еще нехватает метода stop. чтобы убрать класс с блока и прекратить анимацию.

Добавил :)

Добавил метод .start()

API выглядит так .start(event, [callback,] [hide]) .start(event, [hide])

Данный метод автоматически показывает блок (теперь не нужно самостоятельно ставить display: block) и запускает анимацию.

callback может быть как функцией, так и объектом {onStart: cb, onEnd: cb, onIteration: cb}

Т.к. некоторые анимации должны скрывать блок (display: none), то для этого предусмотрен флаг hide. Он говорит, что по завершению анимации блок должен быть скрыт.

Примеры:

animation.start('fade-in')
animation.start('fade-out', true)
animation.start('fade-out', () => console.log('animation ended and block hidden'), true)
animation.start('fade-in', {
  onStart: () => console.log('animation started', 
  onEnd: () => console.log('animation ended')
})

Ребят, проектирую API для очередей. Нужно ваше мнение. Удобно или нет?

.queue(queue [,callback][,hide])

// Simple and hide block (display: none) after animation
animation.queue(['fade-in', 'fade-out'], true);

// Simple with callback
animation.queue(['fade-in', 'fade-out'], () => console.log('ended queue'));

// Extended
animation.queue([
  // step 1
  {type: 'fade-in', duration: 200, delay: 100, callbacks: {
    onStart: () => console.log('fade-in started'),
    onEnd: () => console.log('fade-in ended')
  }},

  // step 2
  () => console.log('call function after first step'),

  // step 3
  {type: 'fade-out', delay: 200},
], () => console.log('ended queue'));

Нашёл "баг" в AnimateCSS связанный с плохим именованием направлений анимаций... Просьба поддержать, т.к. в bem-animations планируется для людей сделать (а это уже ответвление от апстрима). :) https://github.com/daneden/animate.css/issues/648

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

animation.start({
  type: 'fade-in-down',
  duration: '100ms',
  delay: '3000ms',
  callbacks: {
    onStart: () => {},
    onEnd: () => {},
    onIteration: () => {}
  }
}, function () {
  console.log('animation end')
});

Поле callbacks точно нужно? Нельзя on* сложить в корень?

@vithar общее/полное, на данный момент, API имеет такой вид:

.start(type, [,callback] [,hide])
.start(type, [,callbacks] [,hide])
.start(decl, [,callback] [,hide])
.start(decl, [,callbacks] [,hide])

// Примеры заупуска со строковым первым параметром
animation.start('fade-out-left');
animation.start('fade-out-left', () => console.log('ended'));
animation.start('fade-out-left', {onStart: () => console.log('started')});
animation.start('fade-out-left', () => console.log('ended and set display: none'), true);
animation.start('fade-out-left', true); // display: none; после конца анимации

// Примеры запуска с декларацией
const decl = {
  type: 'fade-in-left',
  delay: '100ms',    // Необязательно
  duration: '100ms', // Необязательно
  hide: true,        // Необязательно (display: none; после окончания анимации)
  callbacks: {       // Необязательно, аналогичный функционал 
                     // что и при передаче через второй аргумент
                     // но кэлбеки сработают разные при одинаковых событиях
                     // т.е. данное поле не затрёт другие события и наоборот
    onEnd: () => {},
    onStart: () => {},
    onIteration: () => {},
  }
}

animation.start(decl)

animation.start(decl, { 
  // callbacks object
  onStart: () => {},
  onEnd: () => {},
  onIteration: () => {},
});

animation.start(decl, function () {
  // callback function after end
});

animation.start(decl, () => console.log('callback'), true); // display: none; после окончания анимации
animation.start(decl, true); // display: none; после окончания анимации

Поле callbacks точно нужно? Нельзя on* сложить в корень?

можно вторым аргументом просто передать объект

animation.start(decl, { 
  // callbacks object
  onStart: () => {},
  onEnd: () => {},
  onIteration: () => {},
});

Удобно ли тебе такое API?

upd

хотя сейчас начинаю думать, что действительно так будет лучше (перенести кэлбэки деклараций в корень)

animation.start({
  type: 'fade-in-down',
  duration: '100ms',
  delay: '3000ms',
  onStart: () => {},
  onEnd: () => {},
  onIteration: () => {}
}, function () {
  console.log('animation end')
});