दिलचस्प पोस्ट
Integer.toString (int i) बनाम String.valueOf (int i) एक जावास्क्रिप्ट एआरआर बनाएँ जिसमें 1 … एन अल्पविराम के बाहर उद्धरण चिह्नों पर विभाजन जावा "डबल ब्रेस इनिशिएशन" की दक्षता? प्रारूप फ़्लोट से n दशमलव स्थानों पर मैं कैसे एक पार्श्व धागा फ्लास्क जोड़ सकते हैं? हमें थ्रेड की आवश्यकता क्यों है। मेमोरीबारीअर ()? क्या एंड्रॉइड में .dex फ़ाइलें हैं? कब "a" टैग मूल टैग के रंग गुण का उत्तराधिकारी नहीं होगा? AppCompat v22.1.0 के लिए उन्नत किया गया है और अब अवैध बेचा जा रहा है अपवाद: AppCompat वर्तमान थीम विशेषताओं का समर्थन नहीं करता है ओपनसीवी सी ++ / ओबीजे-सी: कागज / स्क्वायर जांच की एक शीट का पता लगा रहा है पिक्सल को डीपी में परिवर्तित करना डफ के उपकरण कैसे काम करता है? एंड्रॉइड रिसायकल वाइड ग्रिडलेआउट प्रबंधक कॉलम रिक्ति सोप बनाम आराम (अंतर)

कॉलबैक जब 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); });