javascript - アニメーションが終了するまでコールバックが実行されないようにする

Question

最後に実行されるコールバックを持つ関数を作成しようとしています。基本的に、アニメーション化する div に css クラスを追加していて、アニメーションが終了したときにその div を削除したいと考えています。これが私がやっている方法です：

this.animate = function(cssClass, callback) {
        $(div).addClass(cssClass);
            callback();

    }

そして、この関数を呼び出すとき:

this.animate('animated', function () {
     $(div).remove();
}

ただし、アニメーションが起動する前に div が削除されていることに気付きました。

編集：ここにcssクラスがあります：

@-webkit-keyframes fadeOutUp {
    0% {
        opacity: 1;
        -webkit-transform: translateY(0);
    }

    100% {
        opacity: 0;
        -webkit-transform: translateY(-20px);
    }
}
@-moz-keyframes fadeOutUp {
    0% {
        opacity: 1;
        -moz-transform: translateY(0);
    }

    100% {
        opacity: 0;
        -moz-transform: translateY(-20px);
    }
}
@-o-keyframes fadeOutUp {
    0% {
        opacity: 1;
        -o-transform: translateY(0);
    }

    100% {
        opacity: 0;
        -o-transform: translateY(-20px);
    }
}
@keyframes fadeOutUp {
    0% {
        opacity: 1;
        transform: translateY(0);
    }

    100% {
        opacity: 0;
        transform: translateY(-20px);
    }
}

.animated.fadeOutUp {
    -webkit-animation-name: fadeOutUp;
    -moz-animation-name: fadeOutUp;
    -o-animation-name: fadeOutUp;
    animation-name: fadeOutUp;
    -webkit-animation-duration: 0.25s;
    -moz-animation-duration: 0.25s;
    -o-animation-duration: 0.25s;
    animation-duration: 0.25s;
}

EDIT：（解決策）one()次の方法でこの問題を解決しました：

 $(div).one('webkitAnimationEnd oanimationend msAnimationEnd animationend',   
    function(e) {

    // code to execute after animation ends

    $(this).remove();
    });

同じ問題に直面している他の人に役立つことを願っています。