切换类无法清除之前的Tween值问题求助

嘿，我来帮你搞定这个GSAP动画的问题～你遇到的核心问题是GSAP内部的状态缓存机制导致的，下面给你详细分析和解决方案：

问题原因 #

GSAP为了优化动画性能，会在每个被动画的元素上维护一个内部的__gsTransform对象，用来跟踪元素的变换状态（比如x、y坐标、旋转角度等），而不是完全依赖DOM元素的style属性。

你的reset函数里只用了removeAttr("style")，这只能清除DOM上可见的style属性，但GSAP存在内部缓存的变换值并没有被清除。当第二次点击运行home_slide_2时，GSAP会从这个内部缓存读取元素之前的x值，然后基于这个值叠加y方向的动画，最终导致元素同时出现x和y方向的动效。

解决方案 #

我们需要彻底清除GSAP的内部变换缓存，而不是只清除DOM的style属性，具体步骤如下：

1. 用GSAP方法重置元素状态 #

在reset函数中，替换removeAttr("style")为GSAP的TweenMax.set()方法，通过clearProps:"transform"来彻底清除元素的所有变换状态，或者直接指定x、y为0来重置位置：

// 方式1：清除所有transform相关属性
TweenMax.set(".block_1, .block_2", {clearProps:"transform"});

// 方式2：明确重置x和y为初始值
TweenMax.set(".block_1, .block_2", {x:0, y:0});

2. 优化后的完整代码 #

修改后的JavaScript代码如下：

$('.arrow').on("click",function() { 
  var id = $(this).data('id'); 
  if(id == "slide_1"){ 
    // 第一组幻灯片动画
    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(){
      // 先重置两个元素的GSAP变换状态
      TweenMax.set(".block_1, .block_2", {clearProps:"transform"});
      // 再切换元素类名
      $(".block_1").addClass('block_2').removeClass('block_1');
      $(".av2").addClass('block_1').removeClass('block_2');
    }; 
    
    home_slide_1.play(); 
    $(this).data('id', "slide_2"); 
  } else if(id == "slide_2"){ 
    // 第二组幻灯片动画
    var home_slide_2 = new TimelineMax({paused:(true)}) 
      .to(".block_1", 1.5, {y: 30,ease:Power4.easeOut}); 
    home_slide_2.play(); 
  } 
});

额外优化（可选） #

如果担心元素上还有未完成的补间残留，可以在重置状态前添加killTweensOf来清除所有针对这些元素的动画：

TweenMax.killTweensOf(".block_1, .block_2");

这样就能确保元素完全回到初始状态，第二次动画只会执行指定的y方向动效啦～

内容的提问来源于stack exchange，提问作者piyush walia