在动画结束前正在执行的Tweenmax回调

Question

我在我的网站上使用了绿色动画gsap。问题是在动画结束之前执行的回调。在下面的示例中，元素正在半个动画的某个位置被移除。

TweenLite.to($(".flipper"), 2, {rotationY:180,onComplete:function(){ 
    $(this).remove() 
}}); 

有没有人遇到同样的问题？

Answer 1

正如@hjuster所指出的那样，在CSS中声明的转换可能与TweenMax中的onComplete回调发生冲突。我认为onComplete在错误的时间被调用的原因

Answer 2

不，对我来说工作正常（见下面的jsfiddle）。但是，回调函数中的this不是您的动画对象，它是补间。所以你必须，如果你想要的动画之后将其删除，这样使用this.target代替：

TweenLite.to($(".flipper"), 1, {rotationY:180,onComplete:function(){ 
    (this.target).remove() 
}}); 

http://jsfiddle.net/brian_griffin/5Ltfg/

Answer 3

我总是建议使用onUpdateScope，onCompleteScope，等等等等，你都在范围是什么彻底清除你正在做这件事。这个文件很薄，因为它有点埋没。所有greensock的onDoSomething函数都有一个scope参数。

TweenLite.to($(".flipper"), 2, {rotationY:180,onCompleteScope: $(".flipper"), 
    onComplete:function(){$(this).remove() 
}}); 

使Tween完全清楚$（this）= $（“。flipper”）。这对于您希望将修改范围扩展到补间时非常有用。根据你在哪里运行补间，它可能无法访问它范围之外的jquery对象，但你可以通过onCompleteScope传递一个不同的范围。