दिलचस्प पोस्ट
कैसे जाँचें कि क्या स्ट्रिंग में केवल जावा में अंक होते हैं वैरिएबल द्वारा जावास्क्रिप्ट ओब्जेक्ट की सेट करें गिट संघर्ष मार्कर जीआईटी स्थिति संशोधनों को दर्शाती है, जीआईटी चेकआउट – <file> उनको नहीं निकालती है डीओएस लाइन के अंत में लिनक्स लाइन के अंत में कनवर्ट करें कैसे एंकर टैग पर डिफ़ॉल्ट को रोकने के लिए? एनजी-बदलाव के लिए विलंब के लिए कोण निर्देश रिवर्स ऑर्डर में जावा में प्रत्येक लूप के लिए कोई क्या कर सकता है? पता लगाएँ कि क्या वर्तमान समय एक समय सीमा में आता है एसबीटी में "रन" एक्शन के साथ एक आवेदन चलाने के लिए जेवीएम अधिकतम हेप आकार "-Xmx" कैसे निर्दिष्ट करें? आर में फ़्रिक्वेंसी की संख्या "सज्जाकार" क्या हैं और उनका उपयोग कैसे किया जाता है? php जीडी एक पारदर्शी पीएनजी छवि बनाएँ कमांड लाइन में कैसे जांचें अगर कोई दी गई फ़ाइल या निर्देशिका लॉक है (किसी भी प्रक्रिया द्वारा उपयोग किया जाता है)? वनिलाजेएस क्या है?

मैं ब्राउज़र में CSS3 ट्रांज़िशन फ़ंक्शन को कैसे सामान्य कर सकता हूं?

वेबकिट के ट्रांज़िशन इवेंट को वेबकीट ट्रान्सिशनएन्ड कहा जाता है, फ़ायरफ़ॉक्स संक्रमण होता है, ऑपेरा ओट्रान्सेशन एण्ड होता है। शुद्ध जेएस में उन सभी से निपटने का एक अच्छा तरीका क्या है? क्या मुझे ब्राउज़र सूँघना चाहिए? या प्रत्येक एक अलग से लागू? कुछ अन्य तरीका जो मेरे पास नहीं आया है?

अर्थात:

//doing browser sniffing var transitionend = (isSafari) ? "webkitTransitionEnd" : (isFirefox) ? "transitionEnd" : (isOpera) ? "oTransitionEnd"; element.addEventListener(transitionend, function(){ //do whatever },false); 

या

 //asigning an event listener per browser element.addEventListener(webkitTransitionEnd, function(){callfunction()},false); element.addEventListener(oTransitionEnd, function(){callfunction()},false); element.addEventListener(transitionEnd, function(){callfunction()},false); function callfunction() { //do whatever } 

वेब के समाधान से एकत्रित समाधान "मैं ब्राउज़र में CSS3 ट्रांज़िशन फ़ंक्शन को कैसे सामान्य कर सकता हूं?"

Modernizr में प्रयुक्त एक तकनीक है, इसमें सुधार हुआ है:

 function transitionEndEventName () { var i, undefined, el = document.createElement('div'), transitions = { 'transition':'transitionend', 'OTransition':'otransitionend', // oTransitionEnd in very old Opera 'MozTransition':'transitionend', 'WebkitTransition':'webkitTransitionEnd' }; for (i in transitions) { if (transitions.hasOwnProperty(i) && el.style[i] !== undefined) { return transitions[i]; } } //TODO: throw 'TransitionEnd event is not supported in this browser'; } 

जब भी आपको ट्रांज़िशन एंड इवेंट की आवश्यकता होती है, तब आप इस फ़ंक्शन को कॉल कर सकते हैं:

 var transitionEnd = transitionEndEventName(); element.addEventListener(transitionEnd, theFunctionToInvoke, false); 

Matijs टिप्पणी के अनुसार, संक्रमण घटनाओं का पता लगाने का सबसे आसान तरीका एक पुस्तकालय के साथ है, इस मामले में jquery:

 $("div").bind("webkitTransitionEnd.done oTransitionEnd.done otransitionend.done transitionend.done msTransitionEnd.done", function(){ // Unlisten called events by namespace, // to prevent multiple event calls. (See comment) // By the way, .done can be anything you like ;) $(this).off('.done') }); 

लाइब्रेरी-कम जावास्क्रिप्ट में इसे थोड़ा वर्बोज़ मिलता है:

 element.addEventListener('webkitTransitionEnd', callfunction, false); element.addEventListener('oTransitionEnd', callfunction, false); element.addEventListener('transitionend', callfunction, false); element.addEventListener('msTransitionEnd', callfunction, false); function callfunction() { //do whatever } 

अद्यतन करें

निम्नलिखित यह करने का एक क्लीनर तरीका है, और आधुनिक इंजीनियर की आवश्यकता नहीं है

 $(".myClass").one('transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd', function() { //do something }); 

वैकल्पिक रूप से

 var transEndEventNames = { 'WebkitTransition': 'webkitTransitionEnd', 'MozTransition': 'transitionend', 'OTransition': 'oTransitionEnd otransitionend', 'msTransition': 'MSTransitionEnd', 'transition': 'transitionend' }, transitionEnd = transEndEventNames[Modernizr.prefixed('transition')]; 

यह आधुनिकीकरण द्वारा सुझाए गए कोड पर आधारित है, लेकिन ओपेरा के नए संस्करणों के लिए अतिरिक्त ईवेंट के साथ।

http://modernizr.com/docs/#prefixed

यदि आप jQuery और बूटस्ट्रैप $.support.transition.end उपयोग करते हैं। $.support.transition.end वर्तमान ब्राउज़र के लिए सही घटना वापस करेगा।

इसे बूटस्ट्रैप में परिभाषित किया गया है और इसका एनीमेशन कॉलबैक में प्रयोग किया गया है, यद्यपि jQuery के डॉक्स इन गुणों पर भरोसा करने के लिए नहीं कहते हैं:

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

http://api.jquery.com/jQuery.support/

2015 तक, यह एक-लाइनर को सौदा करना चाहिए (IE 10+, क्रोम 1+, सफारी 3.2+, एफएफ 4+ और ओपेरा 12 +): –

 var transEndEventName = ('WebkitTransition' in document.documentElement.style) ? 'webkitTransitionEnd' : 'transitionend' 

ईवेंट श्रोता को जोड़ना सरल है: –

 element.addEventListener(transEndEventName , theFunctionToInvoke); 

यहाँ एक अधिक साफ तरीका है

  function transitionEvent() { // Create a fake element var el = document.createElement("div"); if(el.style.OTransition) return "oTransitionEnd"; if(el.style.WebkitTransition) return "webkitTransitionEnd"; return "transitionend"; } 

दूसरा जाने का रास्ता है उनमें से केवल एक ईवेंट प्रत्येक ब्राउज़र में आग लगाएगा, ताकि आप उन सभी को सेट कर सकें और यह काम करेगा।

Google बंद करना सुनिश्चित करता है कि आपको ऐसा करने की आवश्यकता नहीं है। यदि आपके पास एक तत्व है:

 goog.events.listen(element, goog.events.EventType.TRANSITIONEND, function(event) { // ... your code here }); 

goog.events.eventtype.js के स्रोत को देखकर, ट्रांजििटिन्शन की गणना यूजरैगेंट को देखकर की जाती है:

 // CSS transition events. Based on the browser support described at: // https://developer.mozilla.org/en/css/css_transitions#Browser_compatibility TRANSITIONEND: goog.userAgent.WEBKIT ? 'webkitTransitionEnd' : (goog.userAgent.OPERA ? 'oTransitionEnd' : 'transitionend'), 

मैं इस तरह से कोड का उपयोग (jQuery के साथ)

 var vP = ""; var transitionEnd = "transitionend"; if ($.browser.webkit) { vP = "-webkit-"; transitionEnd = "webkitTransitionEnd"; } else if ($.browser.msie) { vP = "-ms-"; } else if ($.browser.mozilla) { vP = "-moz-"; } else if ($.browser.opera) { vP = "-o-"; transitionEnd = "otransitionend"; //oTransitionEnd for very old Opera } 

इससे मुझे संपत्ति के साथ समेकित वीपी निर्दिष्ट करके चीजों को जोड़ने के लिए जेएस का उपयोग करने की सुविधा मिलती है, और अगर यह किसी ब्राउज़र को नहीं मारा, तो यह मानक का उपयोग करता है। इवेंट मुझे आसानी से बाँध देता है:

 object.bind(transitionEnd,function(){ callback(); }); 

jquery ओवरराइड:

 (function ($) { var oldOn = $.fn.on; $.fn.on = function (types, selector, data, fn, /*INTERNAL*/ one) { if (types === 'transitionend') { types = 'transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd'; } return oldOn.call(this, types, selector, data, fn, one); }; })(jQuery); 

और उपयोग की तरह:

 $('myDiv').on('transitionend', function() { ... });