时间戳

首页 > 解决方案 > 点击 GSAP 将卡片转回

jquery - 点击 GSAP 将卡片转回

问题描述

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

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

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

标签： jqueryhtmlgsap

解决方案

当然，这很容易使用 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();
    }
});

一般来说，最好发布一个最小的、完整的、可验证的问题示例，以便我们可以调试这样的代码并向您展示它的工作原理。

推荐阅读