Question

我有一些基本的Javascript和GreenSock问题与一些扑克牌动画和一个按钮。我试图在测试中获得一系列扑克牌......

在悬停时向下移动 - 已完成
翻转卡片以显示另一侧点击，然后一旦鼠标离开卡片面，它应该翻转 - 完成
实施开/关按钮，在显示所有卡面/显示所有卡背面之间切换 - 完成

现在，只要他们在一个会话中完成所有问题就会出现......

一旦单击开/关按钮，用户就会卡在一个循环中，然后您只能使用开/关按钮来旋转卡。

我认为这种情况正在发生，因为开/关按钮处于活动状态，因此它只使用动画的关闭或 else 部分，问题是我可以＆＃39; t包围我如何解决问题并在揭示所有卡片后启用正常功能。我想过使用一种不同的方法而不是基本上是一种真/假的方法来控制，但是我却在努力想出任何想要的结果。

第二个问题是，一旦显示所有卡面，我希望它忽略之前的悬停翻转动画并保持面部显示，直到卡被点击或按钮已全部翻转，但这并不重要比较第一个问题。

任何帮助都会非常感激，因为自昨天以来这一直困扰着我！

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

如果您确实发现需要维护该点击事件的目的，请确保在从全卡翻转视图返回时取消绑定。

**此外，不是问题的根源，但应注意您的CP的补间混合了TweenLite和＆amp; TweenMax。

Javascript + GreenSock - 点击开/关按钮后补间功能无法正常工作

1 个答案: