मैं जावास्क्रिप्ट लाइब्रेरी के बिना एक संक्रमण अंत का पता कैसे लगा सकता हूं?

Question

मैं किसी ऑब्जेक्ट को सीएसएस संक्रमण के साथ एनिमेट करने के बाद हटाना चाहता हूं, लेकिन मैं जावास्क्रिप्ट लाइब्रेरी का उपयोग करने में सक्षम नहीं हूं।

एनीमेशन कब किया जाता है मैं कैसे पता लगा सकता हूं? क्या मैं कॉलबैक या कस्टम ईवेंट किसी भी तरह का उपयोग करता हूं?

Answer 1

element.addEventListener('transitionend', function(event) { 
    alert("CSS Property completed: " + event.propertyName); 
}, false); 

अभी के लिए, सटीक घटना का नाम मानकीकृत नहीं किया गया है। यहां MDN:

एक एकल ईवेंट है जो संक्रमण पूर्ण होने पर निकाल दिया जाता है।
सभी मानक-अनुरूप ब्राउज़र में, ईवेंट transitionend,
वेबकिट में यह webkitTransitionEnd है।

यहाँ वेबकिट के लिए बेला है: http://jsfiddle.net/bNgWY/

Answer 2

के रूप में मैं वर्तमान में ठीक उसी बात मैं एक उपयोगी, क्रॉस-ब्राउज़र एक Marakana ट्यूटोरियल से कार्यान्वयन साझा करेंगे कर रहा हूँ।

// First, we store the names of the event according to the browsers 

    var navigatorsProperties=['transitionend','OTransitionEnd','webkitTransitionEnd']; 

      //For each of them... 
      for(var i in navigatorsProperties) 
      { 
       //We attach it to our overlay div 
       el.addEventListener(navigatorsProperties[i],function() 
       { 
        // Here's the code we want to fire at transition End 
         console.log('transition end'); 

       },false); 
      } 

उल्लेखनीय यह है कि IE10transitionend साथ बदलाव का समर्थन करता है (MSDN देखें) है।

IE9 और नीचे कर नहीं समर्थन संक्रमण (caniuse.com देखें) ताकि आप एक संक्रमण समाप्त करने के लिए किसी भी eventListener संलग्न करने के लिए (ताकि उन ब्राउज़र के लिए msTransitionend या जो कुछ भी प्रयास न करें) में सक्षम नहीं होगा।

संपादित करें: गीथब पर आधुनिकता दस्तावेज पढ़ने के दौरान मैंने अपने क्रॉस-ब्राउज़र पॉलीफिल पेज पर ठोकर खाई। कई अन्य उपयोगी लिंकों में से मुझे यह छोटा लेकिन बहुत अच्छा transitionend script मिला।

मन कि Github README.md में उदाहरण jQuery का उपयोग लेकिन पुस्तकालय वास्तव में कोई पुस्तकालयों और कोई निर्भरता की आवश्यकता के रूप में यह वेनिला जावास्क्रिप्ट में लिखा है।

Answer 3

मैं एक उपयुक्त 'ट्रांजिशनेंड' पॉलीफिल नहीं ढूंढ पाया जो मेरी आवश्यकताओं को पूरा करता था। तो यदि आप एक बार संक्रमण समाप्त होने के लिए कुछ चाहते हैं, तो इसका उपयोग करें:

(function() { 
    var i, 
     el = document.createElement('div'), 
     transitions = { 
      'transition':'transitionend', 
      'OTransition':'otransitionend', // oTransitionEnd in very old Opera 
      'MozTransition':'transitionend', 
      'WebkitTransition':'webkitTransitionEnd' 
     }; 

    var transitionEnd = ''; 
    for (i in transitions) { 
     if (transitions.hasOwnProperty(i) && el.style[i] !== undefined) { 
      transitionEnd = transitions[i]; 
      break; 
     } 
    } 

    Object.prototype.onTransitionEndOnce = function(callback) { 
     if (transitionEnd === '') { 
      callback(); 
      return this; 
     } 
     var transitionEndWrap = function(e) { 
      callback(); 
      e.target.removeEventListener(e.type, transitionEndWrap); 
     }; 
     this.addEventListener(transitionEnd, transitionEndWrap); 
     return this; 
    }; 
}());