2012-09-19 7 views
6

हमारे पास एक ही ऑब्जेक्ट के विरुद्ध कई एनिमेशन हैं। इन एनिमेशन में से प्रत्येक समाप्त होने पर हमें अलग-अलग कार्रवाइयां करने की ज़रूरत है।jQuery या जावास्क्रिप्ट के साथ कस्टम सीएसएस एनीमेशन अंत घटना से बांधें?

अभी, हम वेबकिटएनिमेशन एन्ड ईवेंट से जुड़ते हैं, और प्रत्येक एनीमेशन को अलग-अलग संभालने के लिए एक gnarly if/then कथन का उपयोग करें।

क्या अनिवार्य रूप से कस्टम वेबकिटएनिमेशन एन्ड ईवेंट बनाने का कोई तरीका है, जो एक विशिष्ट एनीमेशन समाप्त होने पर हमें एक विशिष्ट ईवेंट हैंडलर को आग लगाने की इजाजत देता है? उदाहरण के लिए, आग handler1 जब animation1 समाप्त होता है और आग handler2 जब animation2 समाप्त हो जाती है।

हम वेबकिट ब्राउज़र, विशेष रूप से मोबाइल सफारी के लिए निर्माण कर रहे हैं।

धन्यवाद!

उत्तर

4

एक साधारण घटना ट्रिगर के लिए, आप jQuery के trigger() विधि करने के लिए एक समारोह गुजरती हैं और एक ट्रिगर एक विशिष्ट घटना (जो तब सुनी के लिए-जा सकती है, कॉल करने के लिए है कि समारोह के दिए गए मान का उपयोग कर सकते हैं:

function animEndTrigger(e) { 
    if (!e) { 
     return false; 
    } 
    else { 
     var animName = e.originalEvent.animationName; 
     return animName + 'FunctionTrigger'; 
    } 
} 

$('body').on('bgAnimFunctionTrigger fontSizeFunctionTrigger', function(e){ 
    console.log(e); 
}); 

$('div').on('webkitAnimationEnd', function(e) { 
    $(this).trigger(animEndTrigger(e)); 
}); 

एक मुलाकात:

JS Fiddle demo

आप, ज़ाहिर है, भी कहा जाता है कार्य करने के लिए निर्धारित करने के लिए किया जाए या नहीं सब पर एक घटना वापस जाने के लिए उपयोग करते हैं या तो खुद को घटना ट्रिगर या आकलन कर सकते हैं पारित कर दिया मानकों

var animations = { 
    'bgAnim': 'aParticularEvent' 
}; 

function animEndTrigger(e) { 
    if (!e) { 
     return false; 
    } 
    else { 
     var animName = e.originalEvent.animationName; 
     return animations[animName] ? animations[animName] : false; 
    } 
} 

$('body').on('aParticularEvent', function(e) { 
    console.log(e); 
}); 

$('div').on('webkitAnimationEnd', function(e) { 
    $(this).trigger(animEndTrigger(e)); 
});​ 

JS Fiddle demo: एक विशेष घटना को गति प्रदान करने के लिए आकलन करने के लिए विभागाध्यक्ष किसी चीज़ का इस्तेमाल किया जा सके।

हालांकि, इस मामले में, return false को बदला जाना चाहिए ताकि त्रुटि Uncaught TypeError: Object false has no method 'indexOf' (जिसे मैंने अभी तक परेशान नहीं किया है) प्रदान नहीं किया है।

var animations = { 
    'bgAnim': 'aParticularEvent' 
}; 

function animEndTrigger(e, el) { 
    if (!e || !el) { 
     return false; 
    } 
    else { 
     var animName = e.originalEvent.animationName; 
     if (animations[animName]) { 
      $(el).trigger(animations[animName]); 
     } 
    } 
} 

$('body').on('aParticularEvent', function(e) { 
    console.log(e); 
}); 

$('div').on('webkitAnimationEnd', function(e) { 
    animEndTrigger(e, this); 
});​ 

JS Fiddle demo:

निम्नलिखित बुलाया-समारोह (animEndTrigger()) सीधे trigger() (जो जिस पर trigger() विधि बाध्य करने के लिए एक तत्व की आवश्यकता है) और यह भी कस्टम घटना ऊपर Uncaught TypeError से बचा जाता है का कारण बनता है।

बेशक आप मूल्यांकन करने के लिए if का उपयोग करके प्रभावी रूप से प्रभावी रूप से प्रभावी हैं, इसलिए मुझे विशेष रूप से यह सुनिश्चित नहीं किया जा सकता है कि यह आपके पहले से लागू किए गए समाधान से कोई भी कठिन है।

संबंधित मुद्दे