Кодирование с помощью webkitTransitionEnd - PullRequest
Новая
       11

Кодирование с помощью webkitTransitionEnd

7 голосов
/ 20 декабря 2010

Я кодирую веб-приложение (для iPad), которое использует событие webkitTransitionEnd.

Я хочу вызвать функцию после завершения перехода second .Причина двух переходов в том, что у одного есть свойство -webkit-transition-delay, поэтому две анимации не заканчиваются одновременно.Поскольку это серия анимаций, я хочу вызывать функцию только после завершения второго перехода.

Мой текущий (глупый) обходной путь - связать событие внутри события, которое выглядит примерно так в jQuery.. 

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

Это работает, но его нельзя использовать, когда есть больше анимаций.Скажите, если я хочу перезвонить функции после 50 анимаций, которая заканчивается в разное время.

1 Ответ

0 голосов
/ 05 марта 2012

Это не проверено, но должно дать вам хорошую идею. 

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

Вы также можете сделать это с карри 

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
});
...