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

我有一个在屏幕上移动的图像，当图像到达一个特定的绝对位置（右：-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);
    }
}

var$startedssonbutton=$（'.startedssonbuttonnup'）；
$startedssonbutton.mouseup（函数（）{
$（this.addClass（'animated slideInLeft'）；
});
---------
var movingOutAnimationCounter=2；
var movingOutCurrentPosition=window.innerWidth/2-200
函数moveTrumpOut（）{
movingOutCurrentPosition-=2；
TrumpyRapper.style.right=movingOutCurrentPosition+'px'；
如果（移动计数器<9）{
trumpy.src='../images/trump_walking_out'+movingOutAnimationCounter+'.png'；
movingOutAnimationCounter+=1；
}否则{
movingOutAnimationCounter=1；
trumpy.src='../images/trump_walking_out'+movingOutAnimationCounter+'.png'；
}
如果（移动输出电流位置>-200）{
请求动画帧（moveTrumpOut）；
}
}

---

祝你一切顺利

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

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

最后一个参数，在本例中：1000是以毫秒为单位的时间，此时应该执行内部函数。将类添加到移动元素时，在

mouseup

上运行此函数

使用此css库：