Question

我正在制作某种动画，所以我准备了一个完全与任务相关的演示。我在第一个时间线完成后互换类，并在用户第二次单击时运行另一个时间轴。问题是当播放第二个时间轴时，补间将先前的补间值添加到我在第二次单击时补间的元素。如果你看下面的例子，当运行第二个时间线，即home_slide_2时，block_1元素从前一个补间获取x值，同时设置x和y值。任何人都可以指导我这里我做错了。

$('.arrow').on("click",function() {
  
  var id = $(this).data('id');
    if(id == "slide_1"){

      // transition of first slide
      var home_slide_1 = new TimelineMax({paused:(true),onComplete:reset})
      .to(".block_1", 1.5, {y: 30,ease:Power4.easeOut},"s")
      .to(".block_2", 1.5, {x: 30,ease:Power4.easeOut},"s");

      function reset(){
        $(".block_1").addClass('block_2').removeClass('block_1').removeAttr("style"); 
        $(".av2").addClass('block_1').removeClass('block_2').removeAttr("style"); 
      };       

      home_slide_1.play();  
      $(this).data('id', "slide_2");
    }

  else if(id == "slide_2"){

    // transition of second slide
    var home_slide_2 = new TimelineMax({paused:(true)})
    .to(".block_1", 1.5, {y: 30,ease:Power4.easeOut});
 
    home_slide_2.play();         
  }

});

.arrow{
  float:right;
  width:50px;
  height:50px;
  background:red;
  curspor:pointer
}
.ar1{
  float:right;
  width:50px;
  height:50px;
  background:black;
  curspor:pointer
}

.block_1{
  background:green;
  float:left;
  width:100px;
  height:100px;  
}

.block_2{
  background:blue;
   float:left;
  width:100px;
  height:100px; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js"></script>
<div class="arrow" data-id="slide_1"></div>


<div class="block_1 av1"></div>
<div class="block_2 av2"></div>

Answer 1

您可以使用clearProps清除补间值

else if(id == "slide_2"){

   //clearing the tween values in block_1
   TweenMax.set(".block_1", {clearProps:"all"}); 

   // transition of second slide
   var home_slide_2 = new TimelineMax({paused:(true)})
   .to(".block_1", 1.5, {y: 30,ease:Power4.easeOut});

   home_slide_2.play();      
 }

交换类不会清除以前的补间值

1 个答案: