向后旋转卡片 onclick GSAP

Question

我有一个包含翻盖卡片的项目，在我查看 IE（10 和 11）之前我一直工作得很好。我理解 transform-style: preserve-3d; IE不支持所以我决定走另一条路。我偶然发现了一个使用 GSAP 的修复程序和一个在 IE 中工作的代码笔示例。我的问题是我希望它在点击时来回旋转而不是悬停。没有太多 GSAP 经验，有没有办法在点击时反转动画？

更新的问题：我想在单击卡片中的 "button" 时触发动画，而不是在整个容器中。我已经设置好了，但唯一的问题是它会翻转所有卡片，而不是像我想要的那样只翻转一张

HTML:

   <div id="mainWrap">
        <div class="cardCont">
            <div class="cardBack">Back</div>
            <div class="cardFront">Front</div>
        </div>
        <div class="cardCont">
            <div class="cardBack">Back</div>
            <div class="cardFront">Front</div>
        </div>
  </div>

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

Answer 1

当然，使用 GSAP 的 .reverse() 方法很容易：

$('.cardCont').on('click', function elOver() {
    // If the animation hasn't been ran or it's been reversed
    if(this.animation.progress() === 0
    || this.animation.reversed()) {
        this.animation.play();
    } else { // If it has been played forwards
        this.animation.reverse();
    }
});

一般来说，post minimal, complete, verifiable example 您的问题，这样我们就可以像这样调试代码并向您展示它的工作原理。

向后旋转卡片 onclick GSAP

Rotate card back onclick GSAP

html

jquery

gsap