Question

我有一组3张，每张包含4张卡。

我有2个课程

卡片插入>将显示正在提起的卡片 card-out>将显示卡被隐藏

这些类都不实际隐藏元素，它们仅动画。

要隐藏卡片，我正在使用隐藏卡片类

此外，行为应如下：

一旦隐藏了一张卡片，另一组中的第一张应该开始出现，而第二张开始消失，依此类推。

所以会是这样：

-卡1开始以动画形式输出卡 -卡1制作完成后，应立即将一张新卡放回原处 -同时，卡2消失后，卡2应该开始消失（卡退出）。

<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>

这是我用来显示接下来的四张卡的代码

      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类。

我知道我应该使用Queue（）或回调函数，但是我不太熟悉，或者甚至肯定我正确地理解了它们。

按顺序翻转卡片

0 个答案: