Javascript + GreenSock - твинов не работает правильно после включения/выключения нажмите кнопку

Question

У меня возникают некоторые проблемы с Javascript и GreenSock с некоторыми анимационными играми и кнопкой. Я пытаюсь получить массив игральных карт в тесте на ...

1. Сдвиг вниз по наведению - сделано
2. перевернуть карту, чтобы увидеть другую сторону на щелчок, затем один раз мышь влево карта лицо должно перевернуть обратно - сделать
3. Реализовать на кнопку включения/выключения для переключения между показать все лица карты/показать все карты спины - сделали

Теперь здесь возникают проблемы, когда все они выполняются за один сеанс ...

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

Я думаю, что это происходит потому, что кнопка включения/выключения активна, так что только с помощью от или еще часть анимации, проблема, я просто не могу обернуть мою голову вокруг того, как я бы подходите к этому, чтобы решить проблему и включить нормальную функцию после вскрытия всех карт. Я подумал об использовании другого метода вместо того, чтобы по существу использовать true/false для управления, но я изо всех сил стараюсь придумать любые желаемые результаты.

Вторичная проблема заключается в том, что после того, как будут показаны все грани карты, я хотел бы, чтобы она игнорировала предыдущую анимацию флип-движения и удерживала лица до тех пор, пока не будет нажата карта или кнопка не перевернет их все, но это неважно по сравнению с первой проблемой.

Любая помощь будет принята с благодарностью, поскольку это меня озадачило со вчерашнего дня!

http://codepen.io/Nexus1234/pen/oIgDi

TweenLite.set(".cardWrapper", {perspective:800}); 
TweenLite.set(".card", {transformStyle:"preserve-3d"}); 
TweenLite.set(".back", {rotationY:-180}); 
TweenLite.set([".back", ".front"], {backfaceVisibility:"hidden"}); 

function onoff(){ 
    currentvalue = document.getElementById('onoff').value; 
    if(currentvalue == "Off"){ 
    document.getElementById("onoff").value="On", 
    $(".cardflip").click(
    function() { 
    TweenLite.to($(this).find(".card"), 2.0, {scale:1, rotationY:20, ease:Power4.easeOut}); 
    }); 
    }else{ 
    document.getElementById("onoff").value="Off", 
    $(".cardflip").click(
    function() { 
    TweenLite.to($(this).find(".card"), 1.0, {scale:1.2, rotationY:180, ease:Strong.easeOut}); 
    }); 
    } 
} 

    $(".cardWrapper").hover(
    function() { 
    TweenLite.to($(this).find(".card"), 4.0, {rotationY:20, scale:1, ease:Power4.easeOut}); 
    TweenLite.to($(this).find(".shine"), 0, {scale:1, rotationY:0, ease:Strong.easeOut 
     }); 
    }); 

    $(".cardWrapper").click(
    function() { 
    TweenLite.to($(this).find(".card"), 1.0, {scale:1.2, rotationY:180, ease:Strong.easeOut 
     }); 
    TweenLite.to($(this).find(".shine"), 0, {scale:0, rotationY:180, ease:Strong.easeOut 
     }); 
    }); 

TweenMax.staggerTo($(".card"), 0.45, {rotationY:20}, 0.1); 
TweenMax.staggerTo(".shine", 0.75, {x:0}, 0); 

Answer 1

Это потому, что вы OnOff функция связывает событие щелчка к контейнеру карты для абсолютно не воспринимаемой причины. Таким образом, при возврате из всплывающего обзора с одной картой анимация с одним карточным флип конкурирует с анимациями, связанными с тем, что было значением переключателя, когда вы в последний раз перевернули все поддерживаемые карты.

я пишу твин код по-разному, но следующая адаптация работает для меня:

var switchVal = document.getElementById('onoff').value, 
    cardFlip = $('.cardflip'), 
    allCards = cardFlip.find('.card'); 

var switchProps = { 
    off: {scale:1, rotationY:20, ease:Power4.easeout }, 
    on: {scale:1.2, rotationY:180, ease:Strong.easeout } 
}; 

function onoff(){ 
    if (switchVal === 'Off') { 
     switchVal = "On"; 
     TweenLite.to(allCards, 2.0, switchProps.off); 
    } else { 
     switchVal = "Off"; 
     TweenLite.to(allCards, 1.0, switchProps.on); 
    } 
}; 

Если вы нашли какую-то цель для необходимости поддерживать это событие щелчка, просто убедитесь, что отвязать его при возвращении из всплывающее окно.

** Кроме того, это не корень вашей проблемы, но следует отметить, что ваши подростковые подростки смешивают TweenLite & TweenMax.