Переверните только одну карту за раз GSAP

Question

Я пытаюсь перевернуть карты по нажатию кнопки. Моя проблема в том, что ВСЕ карты переворачиваются, а не только карта, на которую нажимают. Я задал этот вопрос ранее, и он прекрасно работал, когда щелчок был на всем контейнере карты, но понял, что он мне нужен на кнопке

HTML:

<div class="flip-card-column--test">
    <div class="flip-card-container">
        <div class="flip-card-front">
            <p class="flip-card__label">
               Front of Card Label
            </p>
            <div class="flip-card__toggle">
                <span class="flip-card__front">+</span>
            </div>
        </div>
        <div class="flip-card-back">
            <p class="flip-card__label">
                Back of Card Label
            </p>

            <p class="flip-card__text --narrow--mobile flip-card__back">
               Text
            </p>

            <div class="flip-card__toggle">
                <span class="flip-card__back toggle__minus">-</span>
            </div>
        </div>
    </div>
</div>


<div class="flip-card-column--test">
    <div class="flip-card-container">
        <div class="flip-card-front">
            <p class="flip-card__label">
               Front of Card Label
            </p>
            <div class="flip-card__toggle">
                <span class="flip-card__front">+</span>
            </div>
        </div>
        <div class="flip-card-back">
            <p class="flip-card__label">
                Back of Card Label
            </p>

            <p class="flip-card__text --narrow--mobile flip-card__back">
               Text
            </p>

            <div class="flip-card__toggle">
                <span class="flip-card__back toggle__minus">-</span>
            </div>
        </div>
    </div>
</div>

<div class="flip-card-column--test">
    <div class="flip-card-container">
        <div class="flip-card-front">
            <p class="flip-card__label">
               Front of Card Label
            </p>
            <div class="flip-card__toggle">
                <span class="flip-card__front">+</span>
            </div>
        </div>
        <div class="flip-card-back">
            <p class="flip-card__label">
                Back of Card Label
            </p>

            <p class="flip-card__text --narrow--mobile flip-card__back">
               Text
            </p>

            <div class="flip-card__toggle">
                <span class="flip-card__back toggle__minus">-</span>
            </div>
        </div>
    </div>
</div>

SCSS:

    .flip-card-column--test{
    .flip-card-container {
    width: 200px;
    height: 200px;
   }

  .flip-card-front, .flip-card-back {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: absolute;
    width: 200px;
    height: 200px;
    padding: 25px 5px 27px;
    background-color: red;
    backface-visibility: hidden;
  }

   .flip-card-back {
    background-color: blue;

    .flip-card__label{
     padding-top: 0;
     margin-bottom: 6px;
    }
   }
   .flip-card__text{
    margin: 0 auto;
    }
    .flip-card__label{
     padding-top: 15px;
   }
  }

JQUERY GSAP:

 //Card flip animations
    TweenMax.set($($flipCardBack), {rotationY: -180});

    $.each($flipCardContainer, function (i, element) {
        var frontCard = $(this).find('.flip-card-front'),
            backCard = $(this).find('.flip-card-back'),
            tl = new TimelineMax({paused: true, reversed: true});
        tl
            .to(frontCard, 1, {rotationY: 180})
            .to(backCard, 1, {rotationY: 0}, 0)
            .to(element, .5, {z: 50}, 0)
            .to(element, .5, {z: 0}, .5);

        element.animation = tl;

        $('.flip-card__toggle').on('click', function () {
            if (tl.progress() === 0
                || tl.reversed()) {
                tl.play();
            } else {
                tl.reverse();
            }
        });
    });

Это сработало для события щелчка контейнера карты:

$('.flip-card-container').on('click', function elOver() {
if(this.animation.progress() === 0
|| this.animation.reversed()) {
    this.animation.play();
} else { 
    this.animation.reverse();
}
});

Answer 1

Эта ошибка связана с тем, что вы включили общий прослушиватель кликов в функции щелчка. $('.flip-card__toggle').on('click' применяется к всем кнопок переключения вашей карты.

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

Чтобы это исправить, либо переместите прослушиватель события click за пределы события click, как показано ниже:

var $flipCardBack = $(".flip-card-back"),
    $flipCardContainer = $(".flip-card-container");

//Card flip animations
TweenMax.set($flipCardBack, { rotationY: -180 });

$.each($flipCardContainer, function(i, element) {
  var frontCard = $(this).find(".flip-card-front"),
      backCard = $(this).find(".flip-card-back"),
      tl = new TimelineMax({ paused: true, reversed: true });
  tl
    .to(frontCard, 1, { rotationY: 180 })
    .to(backCard, 1, { rotationY: 0 }, 0)
    .to(element, 0.5, { z: 50 }, 0)
    .to(element, 0.5, { z: 0 }, 0.5);

  $(this)[0].animation = tl;
});

$(".flip-card__toggle").on("click", function() {
  var tl = $(this).closest(".flip-card-container")[0].animation;
  if (tl.progress() === 0 || tl.reversed()) {
    tl.play();
  } else {
    tl.reverse();
  }
});

, либо измените селектор прослушивателя события click на что-то конкретное для этого контейнера:

$.each($flipCardContainer, function(i, element) {
  var frontCard = $(this).find(".flip-card-front"),
      backCard = $(this).find(".flip-card-back"),
      toggle = $(this).find(".flip-card__toggle"),
      tl = new TimelineMax({ paused: true, reversed: true });
  tl
    .to(frontCard, 1, { rotationY: 180 })
    .to(backCard, 1, { rotationY: 0 }, 0)
    .to(element, 0.5, { z: 50 }, 0)
    .to(element, 0.5, { z: 0 }, 0.5);

  toggle.on("click", function() {
    if (tl.progress() === 0 || tl.reversed()) {
      tl.play();
    } else {
      tl.reverse();
    }
  });

  $(this)[0].animation = tl;
});

Демо