使用animate.css（描述中的链接）当特定事件完成时如何触发动画

Question

当图像到达特定绝对位置时，我有一个图像在屏幕上移动并从视口移出（右图： - 200），我想触发下面的动画。我对编程比较陌生，不确定如何跟踪某个特定函数何时完成，以便触发下面的动画。

var $startLessonButton = $('.startLessonButtonUp'); 

$startLessonButton.mouseup(function() { 
$(this).addClass('animated slideInLeft'); 
}); 

--------- 

var movingOutAnimationCounter = 2; 
var movingOutCurrentPosition = window.innerWidth/2 - 200 

function moveTrumpOut() { 
    movingOutCurrentPosition -= 2; 
    trumpyWrapper.style.right = movingOutCurrentPosition + 'px'; 
    if (movingOutAnimationCounter < 9) { 
     trumpy.src = '../images/trump_walking_out_' + movingOutAnimationCounter + '.png'; 
     movingOutAnimationCounter += 1; 
    } else { 
     movingOutAnimationCounter = 1; 
     trumpy.src = '../images/trump_walking_out_' + movingOutAnimationCounter + '.png'; 
    } 
    if (movingOutCurrentPosition > -200) { 
     requestAnimationFrame(moveTrumpOut); 
    } 
} 

所有最优秀的！

Answer 1

如果你知道的时候，当移动元素是隐藏的，您可以使用此功能：

setTimeout(function(){ $('.elem').addClass("animCssClass") }, 1000); 

最后的参数，在这个例子：1000是毫秒，当函数内部应该执行的时间。向移动元素添加类时，请在mouseup上运行此功能。