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

GSAP动画无法在选项卡式菜单中工作

1 个答案: