GSAP 动画在选项卡式菜单中不起作用

Question

所以我尝试使用 GSAP 为由相应按钮触发的元素设置动画。动画本身有效，但不是显示相应的元素，而是显示所有元素。我附上了working codepen here

var trigger = ".trigger";
var recipient = ".target";
var animation = new TimelineMax({reversed:true, paused:true});



$(trigger).click(function(e) {
  e.stopPropagation();
  recipient = '#' + $(this).attr('data-target-id');
  if($(trigger).hasClass("active")){
    $(trigger).not(this).removeClass("active");
  }

  if($(".target").hasClass("open")){
    $not_recipient = $(".target").not(recipient);
    $(".target").not(recipient).removeClass("open");
  }

  $(this).toggleClass("active");
  $(recipient).toggleClass("open");

  animation.fromTo(recipient, .3, {display:'none', y:'-100%', autoAlpha:0},{display:'block',y:'0%', autoAlpha:1, ease:Power1.easeOut});
  animation.reversed() ? animation.play() : animation.reverse();
 });

Answer 1

你不需要使用TimelineMax，你可以使用TweenMax。

更新的js

var trigger = ".trigger";
var recipient = ".target";
var animation;


$(trigger).click(function(e) {
    e.stopPropagation();
    if(! $(this).hasClass('active')){
        var parentElm = $(this).parent();
        var targetChild = parentElm.find(recipient);

        $(trigger).removeClass('active');
        $(recipient).removeClass('open');

        $(this).addClass('active');
        targetChild.addClass('open');

        if(animation){
            animation.reverse();
        }
        animation = TweenMax.fromTo(targetChild, .3, {display:'none', y:'-100%', autoAlpha:0},{display:'block',y:'0%', autoAlpha:1, ease:Power1.easeOut});

    }

});

Updated Demo