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

Question

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

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

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

score 6 · Accepted Answer

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

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

score 1 · Accepted Answer

我总是建议使用 onUpdateScope、onCompleteScope 等，这样您就可以完全清楚自己在做什么。文档在这方面相当薄弱，因为它有点被掩埋了。greensock 的所有 onDoSomething 函数都有一个范围参数。

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

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

score 0 · Accepted Answer

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

3 回答 3