Javascript+GreenSock-点击开/关按钮后，tweens无法正常工作

Javascript + GreenSock - tweens not functioning correctly after on/off button click

本文关键字：常工作 工作 tweens 按钮 Javascript+GreenSock-      更新时间：2023-09-26

我在一些扑克牌动画和按钮方面遇到了一些基本的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);

这是因为您的onoff函数将一个点击事件绑定到卡容器，而这是完全没有可察觉的原因的。因此，当从所有卡片翻转视图返回时，单个卡片翻转动画与绑定到上次翻转所有卡片时的开关值的动画相竞争。

我用不同的方式编写tween代码，但以下改编对我有效：

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的粗花呢混合了TweenSite和TweenSite；TweenMax。

相关文章：