test.js

var
/**
 * Fires a custom event when all animations are complete
 * @param   {object}    $element - jQuery object that should trigger event
 * 
 */
 triggerAllAnimationEndEvent = function ($element) {
    var animationCount      = 0,
        animationstart      = "animationstart webkitAnimationStart oanimationstart MSAnimationStart",
        animationend        = "animationend webkitAnimationEnd oanimationend MSAnimationEnd",
        eventname           = "ss.allanimationend",
        unbindHandlers      = function(e){
            $element.trigger(eventname);
            // utility.redraw($element);
            console.log(eventname);
        },
        onAnimationStart    = function (e) {
            if ($(e.target).is($element)) {
                e.stopPropagation();
                animationCount ++;
            }
        },
        onAnimationEnd      = function (e) {
            if ($(e.target).is($element)) {
                e.stopPropagation();
                animationCount --;
                if(animationCount === 0) {
                    unbindHandlers();
                }
            }
        };
    
    $element.on(animationstart, onAnimationStart);
    $element.on(animationend, onAnimationEnd);
},

/**
 * Fires a custom callback when all animations are finished
 * @param   {object}    $element - jQuery object that should trigger event
 * @param   {function}  callback - function to run
 * 
 */
triggerCallback= function ($element, callback) {
    $element.one("ss.allanimationend", callback);

    // Fires fake animation events in case no animations are used
    setTimeout(function(){
        $element.trigger("animationstart");
        $element.trigger("animationend");
    }, 100); // wait a bit
};

triggerAllAnimationEndEvent($('.element'));