दिलचस्प पोस्ट
SQL सर्वर में एक अस्थायी तालिका और तालिका चर में अंतर क्या है? सभी भागने के पात्र क्या हैं? मैं कैसे जांचूं कि वस्तु में जावास्क्रिप्ट में एक संपत्ति है? 'एलीमेंटट्री' के माध्यम से पायथन में नेमस्पेस के साथ XML को पार्स करना मैं एक मोबाइल डिवाइस से एंड्रॉइड में एक फाइल एचटीटीपी के जरिए एक फाइल कैसे भेजूं? क्लास.नईवंस्टेंस () "बुराई" क्यों है? जावा प्रक्रिया के आवासीय स्मृति उपयोग (आरएसएस) बढ़ते हुए getActionBar () रिक्त रिटर्न CSS2.1 नए ब्लॉक स्वरूपण संदर्भ को स्थापित करने के लिए "दृश्यमान" के अतिरिक्त अतिप्रवाह मानों को परिभाषित करता है? एकाधिक तीर फ़ंक्शंस जावास्क्रिप्ट में क्या मतलब है? जीगप्लोट 2 में सीमांत हिस्टोग्राम के साथ स्कैटरप्लॉट .NET obfuscation उपकरण / रणनीति तालिका चर पर एक अनुक्रमणिका बनाना सामग्री सुरक्षा नीति कैसे काम करती है? पायथन में स्ट्रिंग के रूप में एक चर नाम कैसे प्राप्त करें?

कॉलबैक जब CSS3 के संक्रमण खत्म होता है

मैं एक तत्व (अपने अस्पष्टता को 0 में परिवर्तित करना) को मिटाना चाहूंगा और फिर समाप्त होने पर DOM से तत्व निकाल देना चाहिए

JQuery में यह सीधे आगे है क्योंकि आप एनीमेशन पूर्ण होने के बाद "निकालें" निर्दिष्ट कर सकते हैं। लेकिन अगर मैं CSS3 संक्रमण का उपयोग करना चाहता हूं तो संक्रमण / एनीमेशन पूरा हो जाने पर वैसे भी पता होना चाहिए?

वेब के समाधान से एकत्रित समाधान "कॉलबैक जब CSS3 के संक्रमण खत्म होता है"

संक्रमण के लिए आप jQuery के माध्यम से संक्रमण के अंत का पता लगाने के लिए निम्न का उपयोग कर सकते हैं:

$("#someSelector").bind("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(){ ... }); 

मोज़िला का एक उत्कृष्ट संदर्भ है:

https://developer.mozilla.org/en/CSS/CSS_transitions#Detecting_the_completion_of_a_transition

एनिमेशन के लिए यह बहुत समान है:

 $("#someSelector").bind("animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd", function(){ ... }); 

ध्यान दें कि आप सभी ब्राउज़र प्रीफिक्ल्ड इवेंट स्ट्रिंग को बाँध () विधि में एक साथ साथ सभी ब्राउज़रों पर इवेंट फायरिंग का समर्थन करने के लिए पास कर सकते हैं जो इसका समर्थन करते हैं।

अद्यतन करें:

डक द्वारा छोड़ी गई टिप्पणी के अनुसार: आप jQuery के .one() विधि का उपयोग करने के लिए सुनिश्चित करें कि हेन्डलर केवल एक बार आग लगा लेता है। उदाहरण के लिए:

 $("#someSelector").one("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(){ ... }); $("#someSelector").one("animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd", function(){ ... }); 

अपडेट 2:

jQuery bind() विधि को नापसंद किया गया है, और on() विधि पर jQuery 1.7 रूप में पसंदीदा है। bind()

आप कॉलबैक फ़ंक्शन पर off() विधि को off() लिए भी इसका उपयोग कर सकते हैं यह सुनिश्चित करने के लिए कि उसे केवल एक बार निकाल दिया जाएगा। यहां एक उदाहरण है जो one() विधि का उपयोग करने के बराबर है:

 $("#someSelector") .on("animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd", function(e){ // do something here $(this).off(e); }); 

संदर्भ:

  • .off()

  • .one()

एक और विकल्प आपके CSS3 संक्रमण को संभालने के लिए jQuery ट्रांज़िट फ्रेमवर्क का उपयोग करना होगा। संक्रमण / प्रभाव मोबाइल उपकरणों पर अच्छा प्रदर्शन करते हैं और एनीमेशन प्रभावों को करने के लिए आपको अपने सीएसएस फ़ाइल में गंदा CSS3 के संक्रमण की एक पंक्ति को जोड़ना नहीं पड़ता है।

यहां एक उदाहरण दिया गया है जो किसी तत्व की अस्पष्टता को 0 पर बदल देगा, जब आप उस पर क्लिक करेंगे और संक्रमण पूर्ण होने के बाद इसे हटा दिया जाएगा:

 $("#element").click( function () { $('#element').transition({ opacity: 0 }, function () { $(this).remove(); }); }); 

जेएस फ्रेडल डेमो

किसी के लिए यह आसान हो सकता है, यहां एक jQuery पर निर्भर फ़ंक्शन है, जिसमे सीएसएस वर्ग के माध्यम से सीएसएस एनीमेशन लागू करने के लिए सफलता मिली है, फिर बाद में से कॉलबैक मिल रहा है। यह पूरी तरह से काम नहीं करेगा क्योंकि मैं इसे बैकबोन.जेएस ऐप में इस्तेमाल किया था, लेकिन शायद उपयोगी हो

 var cssAnimate = function(cssClass, callback) { var self = this; // Checks if correct animation has ended var setAnimationListener = function() { self.one( "webkitAnimationEnd oanimationend msAnimationEnd animationend", function(e) { if( e.originalEvent.animationName == cssClass && e.target === e.currentTarget ) { callback(); } else { setAnimationListener(); } } ); } self.addClass(cssClass); setAnimationListener(); } 

मैं इसे इस तरह थोड़े से इस्तेमाल किया

 cssAnimate.call($("#something"), "fadeIn", function() { console.log("Animation is complete"); // Remove animation class name? }); 

http://mikefowler.me/2013/11/18/page-transitions-in-backbone/ से मूल विचार

और यह आसान लगता है: http://api.jqueryui.com/addClass/


अद्यतन करें

उपरोक्त कोड और अन्य विकल्पों के साथ संघर्ष करने के बाद, मैं सीएसएस एनीमेशन समाप्त होने के लिए किसी भी सुनवाई के साथ बहुत सतर्क होने का सुझाव दूंगा। चलने वाले कई एनिमेशन के साथ, यह ईवेंट सुनने के लिए बहुत गन्दा हो सकता है। मैं हर ऐनिमेशन के लिए जीएसएपी जैसी एनीमेशन लाइब्रेरी का भी दृढ़ता से सुझाव देता हूं, यहां तक ​​कि छोटे वाले भी।

स्वीकार्य जवाब में क्रोम में एनिमेशन के लिए दो बार आग लग जाती है संभवतः यह इसलिए है क्योंकि यह webkitAnimationEnd और animationEnd रूप में पहचानता है। निम्नलिखित निश्चित रूप से केवल एक बार आग लगाएगा:

 /* From Modernizr */ function whichTransitionEvent(){ var el = document.createElement('fakeelement'); var transitions = { 'animation':'animationend', 'OAnimation':'oAnimationEnd', 'MSAnimation':'MSAnimationEnd', 'WebkitAnimation':'webkitAnimationEnd' }; for(var t in transitions){ if( transitions.hasOwnProperty(t) && el.style[t] !== undefined ){ return transitions[t]; } } } $("#elementToListenTo") .on(whichTransitionEvent(), function(e){ console.log('Transition complete! This is the callback!'); $(this).off(e); });