在动画结束之前执行Tweenmax回调

Question

我在我的网站上使用greensock gsap进行动画制作。问题是在动画结束之前执行的回调。在下面的示例中，元素将被移动到动画的一半处。

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

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

Answer 1

不，对我来说很好（见下面的jsfiddle）。但是，回调函数中的this不是动画对象，而是补间动画。因此，如果要在动画后删除它，则必须使用this.target，如下所示：

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

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

Answer 2

我总是建议使用onUpdateScope，onCompleteScope等，这样你就可以完全清楚你正在做的事情的范围。文档相当渺茫，因为它有点埋没。 greensock的所有onDoSomething函数都有一个范围参数。

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

让Tween完全清楚$（this）= $（“。flipper”）。当您想要在补间范围之外进行更改时，这也非常有用。根据您运行的位置，它可能无法访问其范围之外的jquery对象，但您可以通过onCompleteScope传入不同的范围。

Answer 3

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