在動畫結束前正在執行的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傳遞一個不同的範圍。