Флип-карты в последовательном порядке

Question

У меня есть набор из 3, и каждая из них содержит 4 карты.

У меня есть 2 класса

card-in> покажет, что карта была поднята, card-out> покажетскрытая карта

Ни один из этих классов не скрывает элемент, они только выполняют анимацию.

Чтобы скрыть карту, я использую класс скрытой карты

Также поведение должно быть следующим:

Как только одна карта скрыта, должна начать появляться первая из другой группы, а вторая начинает исчезать и т. Д.

Таким образом, это будет примерно так:

- Карта 1 начинает анимацию с классовой картой-аутом - Как только Карта 1 заканчивается, новая карта должна занять свое место с картой-картой - Старая карта 2должно начаться исчезновение (извлечение карты) после исчезновения Карты 1.

<section class="cards-group cards-group-1 is-active">
  <div class="card-item card-in"> </div>
  <div class="card-item card-in"> </div>
  <div class="card-item card-in"> </div>
  <div class="card-item card-in"> </div>
</section>
<section class="cards-group cards-group-2">
  <div class="card-item card-out card-hidden"> </div>
  <div class="card-item card-out card-hidden"> </div>
  <div class="card-item card-out card-hidden"> </div>
  <div class="card-item card-out card-hidden"> </div>
</section>

Этот код я использую для отображения следующих 4 карт

      let activeCard = $('.cards-group.is-active');

      flipCardsActive(activeCard);
      activeCard
        .toggleClass('is-active');
      flipCardsInactive(activeCard.prev('.cards-group'));

      activeCard
        .prev('.cards-group')
        .toggleClass('is-active');

  function flipCardsActive(cardGroup, onEnd) {
    cardGroup.children('.card-item').each(function(i){
      let row = $(this);
      row.toggleClass('card-in');
      row.toggleClass('card-out');
      setTimeout(function() {
        row.toggleClass('card-hidden');
      }, 300*i);
    });
  }

  function flipCardsInactive(cardGroup) {
    cardGroup.children('.card-item').each(function(i){
      let row = $(this);
      row.toggleClass('card-out');
      setTimeout(function() {
        row.toggleClass('card-hidden');
        row.toggleClass('card-in');
      }, 300*i);
    });
  }

Проблема, с которой я столкнулся,карточная анимация. Почему-то я этого не вижу. Карты просто скрываются, а анимация теряется.

Я не могу использовать animate (), поскольку он не принимает классы Css.

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