सीएसएस संक्रमण पर कॉलबैक

Question

क्या सीएसएस संक्रमण पूरा होने पर अधिसूचना (कॉलबैक की तरह) प्राप्त करना संभव है?

Answer 1

मुझे पता है कि सफारी webkitTransitionEnd कॉलबैक लागू करता है जिसे आप सीधे संक्रमण के साथ तत्व से जोड़ सकते हैं।

उनके उदाहरण (कई पंक्तियों में रीफोर्मेट):

box.addEventListener( 
    'webkitTransitionEnd', 
    function(event) { 
     alert("Finished transition!"); 
    }, false); 

Answer 2

हाँ, अगर ऐसी बातें ब्राउज़र द्वारा समर्थित हैं, तो एक घटना है जब संक्रमण पूर्ण शुरू हो रहा है। वास्तविक घटना तथापि, ब्राउज़रों के बीच अंतर होता है:

• वेबकिट ब्राउज़रों (क्रोम, सफारी) webkitTransitionEnd
• फ़ायरफ़ॉक्स का उपयोग करता transitionend
• IE9 + का उपयोग करता msTransitionEnd
• ओपेरा oTransitionEnd

लेकिन अगर आप का उपयोग करता है का उपयोग करें पता होना चाहिए कि webkitTransitionEnd हमेशा आग नहीं होता है! इसने मुझे कई बार पकड़ा है, और ऐसा लगता है कि अगर एनीमेशन तत्व पर कोई प्रभाव नहीं पड़ेगा। इस के आसपास पहुंचने के लिए, इस मामले में इवेंट हैंडलर को आग लगाने के लिए टाइमआउट का उपयोग करना समझ में आता है कि यह अपेक्षित रूप से ट्रिगर नहीं किया गया है। इस समस्या के बारे में एक ब्लॉग पोस्ट यहाँ उपलब्ध है: -:

http://www.cuppadev.co.uk/the-trouble-with-css-transitions/ < 500 आंतरिक सर्वर त्रुटि

इसे ध्यान में रखते

, मैं कोड का एक हिस्सा में इस घटना है कि इस तरह एक सा लग रहा है का उपयोग करते हैं

var transitionEndEventName = "XXX"; //figure out, e.g. "webkitTransitionEnd".. 
var elemToAnimate = ... //the thing you want to animate.. 
var done = false; 
var transitionEnded = function(){ 
    done = true; 
    //do your transition finished stuff.. 
    elemToAnimate.removeEventListener(transitionEndEventName, 
             transitionEnded, false); 
}; 
elemToAnimate.addEventListener(transitionEndEventName, 
           transitionEnded, false); 

//animation triggering code here.. 

//ensure tidy up if event doesn't fire.. 
setTimeout(function(){ 
    if(!done){ 
     console.log("timeout needed to call transition ended.."); 
     transitionEnded(); 
    } 
}, XXX); //note: XXX should be the time required for the 
     //animation to complete plus a grace period (e.g. 10ms) 

नोट: संक्रमण घटना अंत नाम प्राप्त करने के लिए आप उत्तर के रूप में पोस्ट की गई विधि का उपयोग कर सकते हैं: How do I normalize CSS3 Transition functions across browsers?। CSS3 transition events

Answer 3

jQuery.transit plugin, CSS3 परिवर्तनों और बदलाव के लिए एक प्लगइन, स्क्रिप्ट से अपने CSS एनिमेशन कॉल करेगा और आपको एक कॉलबैक दे सकते हैं - :

नोट: इस सवाल का भी से संबंधित है।

Answer 4

मैं निम्नलिखित कोड का उपयोग कर रहा हूं, यह पता लगाने की कोशिश करने से कहीं अधिक सरल है कि ब्राउजर किस विशिष्ट अंत घटना का उपयोग करता है।

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

---

वैकल्पिक रूप से, अगर आप बूटस्ट्रैप का उपयोग तो आप बस

$(".myClass").one($.support.transition.end, 
function() { 
//do something 
}); 

क्या कर सकते हैं यह वह जगह है क्योंकि वे bootstrap.js में निम्नलिखित

+function ($) { 
    'use strict'; 

    // CSS TRANSITION SUPPORT (Shoutout: http://www.modernizr.com/) 
    // ============================================================ 

    function transitionEnd() { 
    var el = document.createElement('bootstrap') 

    var transEndEventNames = { 
     'WebkitTransition' : 'webkitTransitionEnd', 
     'MozTransition' : 'transitionend', 
     'OTransition'  : 'oTransitionEnd otransitionend', 
     'transition'  : 'transitionend' 
    } 

    for (var name in transEndEventNames) { 
     if (el.style[name] !== undefined) { 
     return { end: transEndEventNames[name] } 
     } 
    } 

    return false // explicit for ie8 ( ._.) 
    } 

    // http://blog.alexmaccaw.com/css-transitions 
    $.fn.emulateTransitionEnd = function (duration) { 
    var called = false, $el = this 
    $(this).one($.support.transition.end, function() { called = true }) 
    var callback = function() { if (!called) $($el).trigger($.support.transition.end) } 
    setTimeout(callback, duration) 
    return this 
    } 

    $(function() { 
    $.support.transition = transitionEnd() 
    }) 

}(jQuery);