Javascript + GreenSock - 補間開/關按鈕點擊後無法正常工作

Question

我在玩一些紙牌動畫和一個按鈕時遇到了一些基本的Javascript和GreenSock問題。我想獲得的打牌測試到數組...

1. 下移懸停 - 做
2. 翻轉卡上顯示點擊對方，然後一旦鼠標離開卡面應該向後翻轉 - 做
3. 實現開/關按鈕顯示之間的所有卡面顯示所有卡背上轉/ - 做

現在，一旦它們全部在一個會話中完成，問題就出現在這裏......

一旦開/關按鈕被點擊一次，用戶就會被卡在一個循環中，然後您只能使用開/關按鈕來旋轉卡片。

我認爲這正在發生，因爲開/關按鈕被激活，所以只能通過使用關閉或動畫的其他部分，問題是我不能換我的頭周圍我會怎樣解決此問題並解決問題並在顯示所有卡後啓用正常功能。我想過使用一種不同的方法，而不是真正的/錯誤的控制，但我正在努力想出任何想要的結果。

的第二個問題是，一旦被顯示的所有卡的面孔，我想它忽略前面盤旋翻轉動畫，並保持顯示，直到卡被點擊或按鈕翻轉他們所有的面孔，但這不重要與第一個問題相比。

任何幫助將不勝感激，因爲從昨天開始我一直困惑着我！

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功能結合click事件到卡容器絕對沒有明顯的理由。因此，當從全卡翻轉視圖返回時，單卡翻轉動畫將與上次翻轉所有支持的卡時切換值相關的動畫進行競爭。

我寫我的補間的代碼不同，但以下改編爲我工作：

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

如果您發現某種目的的需要，以保持該點擊事件，只要確保在返回時解除綁定全卡翻轉視圖。

**另外，不是你的問題的根源，但應該注意你的CP的補間混合TweenLite & TweenMax。