Обратный вызов Tweenmax выполняется до конца анимации

Question

Я использую gens для greensock для анимации на своем веб-сайте. Проблема - это обратные вызовы, которые выполняются до конца анимации. В следующем примере элементы удаляются где-то на половине анимации.

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

Неужели кто-нибудь испытал ту же проблему?

Answer 1

Как отметил @hjuster, переход, объявленный в CSS, может конфликтовать с onComplete обратным вызовом в TweenMax. Я думаю, что причина, по которой onComplete вызывается в неподходящее время

Answer 2

Нет, отлично работает для меня (см. Jsfiddle ниже). Тем не менее, в вашей функции обратного вызова не является вашим анимированным объектом, это твин. Таким образом, вы должны использовать this.target вместо этого, если вы хотите, чтобы удалить его после анимации, как это:

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

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

Answer 3

Я всегда рекомендую использовать onUpdateScope, onCompleteScope и т.д., так что вы совершенно ясно, на какой объем этого вы делаете. Документация довольно тонкая, потому что похожа на нее. Все функции onDoSomething для greensock имеют параметр scope.

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

Совершенно ясно для Tween, что $ (this) = $ (". Flipper"). Это также очень полезно, когда вы хотите сделать изменения вне сферы действия анимации. В зависимости от того, где вы запустили вас, он может не иметь доступа к объектам jQuery за пределами его области видимости, но вы можете перейти в другую область с помощью onCompleteScope.