javascript - 使用 animate.css(描述中的链接)如何在特定事件完成时触发动画

Question

我有一个图像在屏幕上移动并移出视口(viewport)，当图像到达特定的绝对位置(右:- 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 上运行此函数。