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

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

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

Interchanging classes doesn't clear previous tween values

javascript

jquery

gsap

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

Interchanging classes doesn't clear previous tween values

javascript

jquery

gsap

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