javascript - 仅在前一个事件完全完成后才开始事件？

Question

在下面的函数中，我希望最后一个事件 $('.bg-contact').addClass('activated'); 在前一个事件完全完成时启动。到目前为止，一切都同时发生。如何确保 .bg-contact 仅在上面的所有事情都发生之后才添加 activated 类？

function contactFadeIn() {
    $('#contact').addClass('activated');
    $('#contact-info').removeClass('fadeOutUp').addClass('animated fadeInUp');
    $('.bg-contact').addClass('activated');
}

编辑

function contactFadeIn() {
    $('#contact').addClass('activated');
    $('#contact-info').removeClass('fadeOutUp').addClass('animated fadeInUp').on('transitionend webkitTransitionEnd oTransitionEnd', function () { 
        $('.bg-contact').addClass('activated');
    });;
}

Answer 1

您可能想到了 CSS 过渡。

如果是这样，则使用 transitionEnd 事件安排在转换完成时发生的事件。