2

Web サイトのアニメーションに greensock gsap を使用しています。問題は、アニメーションの終了前に実行されているコールバックです。以下の例では、要素がアニメーションの半分のどこかで削除されています。

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

誰かが同じ問題を経験しましたか?

4

3 に答える 3

6

いいえ、私には問題なく動作します (以下の jsfiddle を参照)。ただし、thisコールバック関数はアニメーション化されたオブジェクトではなく、トゥイーンです。したがってthis.target、アニメーション後に削除する場合は、代わりに次のように使用する必要があります。

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

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

于 2013-04-04T18:53:31.783 に答える
1

onUpdateScope、onCompleteScope などを使用することを常にお勧めします。これにより、実行している範囲が完全に明確になります。ドキュメントはちょっと埋もれているので、これについてはかなりスリムです。greensock のすべての onDoSomething 関数にはスコープ パラメーターがあります。

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

$(this) = $(".flipper") であることをトゥイーンに完全に明確にします。これは、トゥイーンに範囲外の変更を加えたい場合にも非常に役立ちます。トゥイーンを実行した場所によっては、スコープ外の jquery オブジェクトにアクセスできない場合がありますが、onCompleteScope を介して別のスコープを渡すことができます。

于 2013-10-15T17:29:05.437 に答える
0

@hjuster が指摘したように、CSS で宣言されたトランジションは、TweenMax の onComplete コールバックと競合する可能性があります。onComplete が間違ったタイミングで呼び出される理由は

于 2015-02-23T10:57:26.993 に答える