一次只翻转一张卡片 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' 适用于所有个卡片切换按钮。

换句话说，每次单击任何卡片切换时，您都会告诉它为每个时间轴设置动画。

要解决此问题，请将点击事件侦听器移到点击事件之外，如下所示：

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();
  }
});

或者将点击事件侦听器的选择器更改为特定于该容器的内容：

$.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;
});

一次只翻转一张卡片 GSAP

Flip only one card at a time GSAP

html

jquery

gsap

Demo