Coding with webkitTransitionEnd

I am coding a web app (for iPad) that uses the event webkitTransitionEnd.

I want to call back a function when the second transition is ended. The rea开发者_JAVA百科son why there are two transitions is because one has a -webkit-transition-delay property so they two animations don't end at the same time. Since this is a series of animation, I want to call the function only when the second transition is finished.

My current (stupid) workaround is to bind the event inside an event, which looks something like this in jQuery.

$(this).bind('webkitTransitionEnd', function(){
   $(this).bind('webkitTransitionEnd', function(){
      \*some code here*\
      $(this).unbind();
   });
   $(this).unbind();
});

This works but it is not usable when there are more animations. Say if I want call back a function after 50 animations which ends at different time.

This isn't tested but should give you a good idea.

function waitOnTransition(elem, endIndex, callback){
    var transitionIndex = 0;
    $(elem).on('webkitTransitionEnd', function(){
        if(transitionIndex == endIndex){
            callback();
        }else{
            transitionIndex++;
        }
    });
}
waitOnTransition('#elemID', 3, function(){
   //do stuff
});

You could also do it with curry

function makeTransitionEnd(endIndex){
    var endIndex = endIndex;
    var out = function(elem, callback){
        var transitionIndex = 0;
        $(elem).on('webkitTransitionEnd', function(){
            if(transitionIndex == endIndex){
                callback();
            }else{
                transitionIndex++;
            }
        });
    });
    return out;
}

//make curry
var waitForThreeEnds = makeTransitionEnd(3);
waitForThreeEnds('#elemID', function(){
    //do stuff
});