Codage avec webkitTransitionEnd

Je suis codage d'une application web (pour iPad) qui utilise l'événement webkitTransitionEnd.

Je tiens à rappeler une fonction lorsque la deuxième de transition est terminée. La raison pourquoi il y a deux transitions est parce que l'on a un -webkit-transition-delay de la propriété de sorte qu'ils deux animations de ne pas finir dans le même temps. Puisque c'est une série d'animation, je tiens à appeler la fonction uniquement lorsque le deuxième transition est terminée.

Mon actuel (stupide) solution de contournement consiste à lier l'événement à l'intérieur d'un événement, qui ressemble à quelque chose comme ça en jQuery.

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

Cela fonctionne, mais il n'est pas utilisable quand il y a plus d'animations. Disons que si je veux le retour d'appel d'une fonction après 50 animations qui se termine à un moment différent.

  • Pouvez-vous préciser ce que vous entendez par vous avez deux transitions? Il ne devrait être qu'1 transition par élément autorisée à la fois.
  • probablement le coup d'envoi de deux animations en parallèle, par exemple, pour animer deux divs côte à côte dans le même temps.
  • PS utiliser $(this).un() au lieu de se lier si vous souhaitez supprimer l'événement après qu'il a tiré.
  • merci! cela fonctionne!
InformationsquelleAutor felixlaumon | 2010-12-20
  1. 0

    Ce n'est pas testé mais devrait vous donner une bonne idée.

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

    Vous pourriez aussi le faire avec du 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
});
    InformationsquelleAutor Fresheyeball