Внесите обещание, когда анимация анимации закончилась

Question

Я использую Tween для создания анимации, и как только эта анимация завершена, я хочу вызвать другое действие, чтобы установить src iframe.

Я знаю, что мне нужно использовать обещания, но я не уверен на 100%, как реализовать его в этом случае, и пробовал уже довольно давно. Он работает со следующим кодом

Tween.to('#slideshow', 1, { 
    top: '50%' 
}); 

setTimeout(function(){ 
    $('.video-one').attr('src', 'https://www.youtube.com/embed/testOne'); 
    $('.video-one').attr('src', 'https://www.youtube.com/embed/testOne'); 
    }, 800) 

НО когда я пытаюсь следующий его не работает

Tween.to('#slideshow', 1, { 
    top: '50%' 
}).done(function(){ 
    $('.video-one').attr('src', 'https://www.youtube.com/embed/testOne'); 
    $('.video-one').attr('src', 'https://www.youtube.com/embed/testOne'); 
}); 

Answer 1

Основываясь на том, что я вижу в User Guide, Tween.js не поддержка обещаний. Вместо этого вы должны использовать обратные вызовы, которые они задают. В этом случае я предполагаю, что onComplete является то, что вы ищете:

Tween.to('#slideshow', 1, { 
    top: '50%' 
}).onComplete(function() { 
    // Code goes here 
}); 

Answer 2

Для записи, такой сценарий предусмотрен (возможно, непреднамеренно) ребятами на создателей TweenLite в GreenSock.

Связанное с TweenLite в их загрузки GSAP является jquery.gsap.js, плагин JQuery, который они вводят следующим образом:

Good news for anyone using jQuery.animate() - the new jquery.gsap.js plugin allows you to have GSAP take control under the hood so that your animations perform better; no need to change any of your code. Plus GSAP adds numerous capabilities, allowing you to tween colors, 2D transforms (rotation, scaleX, scaleY, skewX, skewY, x, y), 3D transforms (rotationX, rotationY, z, perspective), backgroundPosition, boxShadow, and lots more. You can even animate to a different className!

С jquery.gsap.js установлен, jQuery().animate() будет анимировать с помощью TweenLite, и по-прежнему позволяют JQuery-х .promise() быть скованным, давая вам обещание завершить.

Сначала установите JQuery, TweenMax (или TweenLite и его CSS плагин) и jquery.gsap.js плагин:

<script type="text/javascript" src="/path/to/jquery-x.y.z.min.js"></script> 
<script type="text/javascript" src="/path/to/TweenMax.js"></script> 
<script src="/path/to/jquery.gsap.js"></script> 

Теперь вы можете написать стандартный JQuery .animate() с преимуществами TweenMax/TweenLite, и по-прежнему возвращают JQuery обещание:

function doAnimation() { 
    return $("#myID").animate({ 
     backgroundColor: "#FF0000", // color animation is not provided by raw jQuery. 
     width: "50%", 
     top: "100px", 
     ease: Power2.easeInOut // this is a GSAP easing function 
    }).promise(); 
} 

doAnimation().then(function() { 
    console.log('animation complete'); 
});