एकाधिक संक्रमण होने पर मैं 'विशिष्ट' तत्व पर एक सीएसएस संक्रमण के अंत का पता कैसे लगा सकता हूं?

Question

मैं बहुत की तरह, एक CSS3 के संक्रमण के अंत का पता लगाने के लिए निम्न उपयोग किया गया है: -

CACHE.previewControlWrap.css({ 
       'bottom':'-217px' 
      }).one('webkitTransitionEnd transitionend msTransitionEnd oTransitionEnd', function() { 
       CACHE.songWrap.css({ 
        'bottom': '0' 
       }); 
    }); 

यह पूरी तरह से काम करता है, एक सीएसएस संक्रमण होता है, तो इसके पूर्ण होने पर, एक और जगह लेता है।

हालांकि जब मैं इस अज्ञात फ़ंक्शन को तीसरे स्तर पर घोंसला करता हूं, तो यह काम नहीं करता है। तीसरा संक्रमण 'एंड' घटना दूसरी बार के रूप में दूसरी बार की जाती है, जैसा कि उन्हें एक दूसरे के बाद चेन करने की बजाय (जैसा कि jQuery .animate() के साथ होता है)

मैं क्या करना चाहता हूं 'ट्रांजिशनेंड' 'घटना ' विशिष्ट ' तत्व। वर्तमान में ऐसा लगता है कि किसी भी तत्व पर एक संक्रमण घटना की तलाश है और तदनुसार आग लगती है। यदि नहीं, तो क्या कोई और कामकाज है ताकि मेरे पास तीन लगातार सीएसएस संक्रमण घटनाएं हो सकें जो पिछले एक पूर्ण होने के बाद सभी फायरिंग को कतारबद्ध करती हैं।

अग्रिम धन्यवाद। अपने आप को उम्मीद है कि यह एक ही मुद्दे के साथ किसी और में मदद मिलेगी

if(Modernizr.csstransitions){ 

     CACHE.leftcolbottom.css({ 
      'left':'-230px' 
     }); 
     CACHE.songwrap.css({ 
      'left':'100%', 
      'right': '-100%' 
     }); 
     CACHE.previewControlWrap.css({ 
      'bottom':'-217px' 
     }).one('webkitTransitionEnd transitionend msTransitionEnd oTransitionEnd', function() { 
      CACHE.songWrap.css({ 
       'bottom': '0' 
      }); 
      CACHE.middle.css({ 
       'bottom': '350px' 
      }).one('webkitTransitionEnd transitionend msTransitionEnd oTransitionEnd', function() { 
       CACHE.slidewrap.css({ 
        'left': '50%', 
        'right': '0%' 
       }); 
       CACHE.leftcoltop.css({ 
        'left': '0%' 
       });  
      });   
     }); 

    } 

Answer 1

ठीक है, मैं वास्तव में इस सवाल का जवाब मिल गया है, -:

नीचे कोड है कि समस्या पैदा कर रहा है।

समाधान 'आग एक बार' .one() विधि की बजाय मानक jQuery .on() विधि का उपयोग करना है। फिर यह देखने के लिए लक्ष्य की जांच करें कि क्या वह तत्व है जिसे आपने ईवेंट को बाध्य किया है, फिर अंत में, ईवेंट हैंडलर को उसी अनाम फ़ंक्शन में हटा दें।

बनाता है 'तीसरी' नेस्ट संक्रमण कोड इस तरह मेरे मामले में देखो: -

}).on('webkitTransitionEnd transitionend msTransitionEnd oTransitionEnd', function (e) { 
       if($(e.target).is(this)){ 
        CACHE.slidewrap.css({ 
         'left': '50%', 
         'right': '0%' 
        }); 
        CACHE.leftcoltop.css({ 
         'left': '0%' 
        }); 
        $(this).off('webkitTransitionEnd transitionend msTransitionEnd oTransitionEnd'); 
       } 
      });  

किसी और को एक और अधिक सुरुचिपूर्ण समाधान है, मुझे पता है और मैं के रूप में आप का जवाब अवार्ड जाएगा कृपया उचित।