वेबकिट के साथ कोडिंग ट्रांसमिशन एंड

Question

मैं एक वेब ऐप (आईपैड के लिए) कोडिंग कर रहा हूं जो घटना webkitTransitionEnd का उपयोग करता है।

मैं दूसरा संक्रमण समाप्त होने पर एक फ़ंक्शन वापस कॉल करना चाहता हूं। दो संक्रमण होने का कारण यह है कि किसी के पास -webkit-transition-delay संपत्ति है, इसलिए वे दो एनिमेशन एक ही समय में समाप्त नहीं होते हैं। चूंकि यह एनीमेशन की एक श्रृंखला है, इसलिए मैं केवल तभी कॉल करना चाहता हूं जब दूसरा संक्रमण समाप्त हो जाए।

मेरा वर्तमान (बेवकूफ) वर्कअराउंड घटना के अंदर ईवेंट को बांधना है, जो jQuery में ऐसा कुछ दिखता है।

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

यह काम करता है लेकिन अधिक एनिमेशन होने पर यह उपयोग करने योग्य नहीं है। कहें कि क्या मैं 50 एनिमेशन के बाद एक समारोह को वापस कॉल करना चाहता हूं जो अलग-अलग समय पर समाप्त होता है।

Answer 1

यह परीक्षण नहीं किया गया है लेकिन आपको एक अच्छा विचार देना चाहिए।

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