Повернуть карту обратно по щелчку GSAP - PullRequest
Новая
       9

Повернуть карту обратно по щелчку GSAP

0 голосов
/ 01 ноября 2019

У меня есть проект, в котором есть флип-карты, с которыми я прекрасно работал, пока не посмотрел в IE (10 и 11). Я понимаю стиль трансформации: preserve-3d;не поддерживается в IE, поэтому я решил пойти другим путем. Я наткнулся на исправление, используя GSAP и пример кода, который работает в IE. Моя проблема в том, что я хочу, чтобы он вращался взад-вперед при щелчке, а не при наведении. Не имея большого опыта 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();
            }
        });
    });

1 Ответ

1 голос
/ 01 ноября 2019

Конечно, это легко, используя метод 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();
    }
});

Вообще говоря, хорошо опубликовать минимальный, полный, проверяемый пример вашей проблемы, чтобы мы моглиОтладочный код, как это и покажет вам, как это работает.

...