CSS3 संक्रमण खत्म होने पर कॉलबैक करें

Question

मैं एक तत्व को फीका करना चाहूंगा (इसकी अपारदर्शिता को 0 पर परिवर्तित करना) और फिर जब समाप्त हो जाए तो तत्व को DOM से हटा दें।

JQuery में यह सीधे आगे है क्योंकि आप एनीमेशन को पूरा करने के बाद होने वाले "निकालें" को निर्दिष्ट कर सकते हैं। लेकिन अगर मैं CSS3 संक्रमणों का उपयोग करके चेतन करना चाहता हूं, तो यह जानने के लिए कि संक्रमण / एनीमेशन कब पूरा हो गया है?

Comments

इसके समान होना चाहिए: stackoverflow.com/questions/6186454/…

— निकोलस मोदार्ज़िक

डुप्लिकेट: stackoverflow.com/questions/2087510/callback-on-css-transition

— वरुण सिंह

Answer 1

संक्रमण के लिए आप jQuery के माध्यम से एक संक्रमण के अंत का पता लगाने के लिए निम्नलिखित का उपयोग कर सकते हैं:

$("#someSelector").bind("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(){ ... });

मोज़िला का एक उत्कृष्ट संदर्भ है:

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions#Detecting_the_start_and_completion_of_a_transition

एनिमेशन के लिए यह बहुत समान है:

$("#someSelector").bind("animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd", function(){ ... });

ध्यान दें कि आप सभी ब्राउज़र उपसर्ग किए गए इवेंट स्ट्रिंग्स को बाइंड () विधि में एक साथ सभी ब्राउज़रों पर ईवेंट फायरिंग का समर्थन करने के लिए पास कर सकते हैं।

अपडेट करें:

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

$("#someSelector").one("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(){ ... });

$("#someSelector").one("animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd", function(){ ... });

अपडेट 2:

jQuery bind()विधि को पदावनत कर दिया गया है, और on()विधि को पसंद किया जाता है jQuery 1.7।bind()

आप off()कॉलबैक फ़ंक्शन पर विधि का उपयोग कर सकते हैं यह सुनिश्चित करने के लिए कि इसे केवल एक बार निकाल दिया जाएगा। यहाँ एक उदाहरण है जो one()विधि का उपयोग करने के बराबर है :

$("#someSelector")
.on("animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd",
 function(e){
    // do something here
    $(this).off(e);
 });

संदर्भ:

• .off()

• .one()

Comments

यह ध्यान देने योग्य है कि कॉलबैक को हर उस बच्चे तत्व के लिए निकाल दिया जाएगा जो पारगमन भी करता है। यह इस बात को ध्यान में रखने के लिए बहुत महत्वपूर्ण है कि आप सोच रहे हैं कि आपका कॉलबैक आपके अपेक्षा से अधिक बार क्यों निकाल दिया गया है। मुझे अब तक किसी भी काम के बारे में जानकारी नहीं है।

— लैव

@ क्या आप आसानी से इस घटना के टारगेट की तुलना अपने लक्ष्य से कर सकते हैं। तो कुछ इस तरह से: समारोह (घटना) {अगर (event.target === event.currentTarget) {/ * क्या सामान * /}}

— जिम जेफर्स

हाँ, मुझे लगा कि टिप्पणी लिखने के कुछ ही समय बाद मैं बाहर आ गया। > _ <हालांकि इसे पोस्ट करने के लिए धन्यवाद; मुझे यकीन है कि यह दूसरों की मदद करेगा! :)

— लेव

हम jQuery v1.7 + api.jquery.com/bind.on().bind()

— olo

सभी आधुनिक ब्राउज़र अब उपसर्ग घटना का समर्थन करते हैं। caniuse.com/#feat=css-transitions यह भी ध्यान दें कि यदि आपके पास "webkitTransitionEnd में ट्रांज़िशन है" तो इसे क्रोम में दो बार ट्रिगर किया जाएगा।

— माइकल एस।

Answer 2

एक और विकल्प आपके CSS3 संक्रमण को संभालने के लिए jQuery ट्रांज़िट फ्रेमवर्क का उपयोग करना होगा । संक्रमण / प्रभाव मोबाइल उपकरणों पर अच्छा प्रदर्शन करते हैं और एनीमेशन प्रभाव करने के लिए आपको अपनी CSS फ़ाइल में गन्दा CSS3 संक्रमणों की एक भी पंक्ति जोड़ने की आवश्यकता नहीं है।

यहां एक उदाहरण दिया गया है जो किसी तत्व की अपारदर्शिता को 0 में बदल देगा जब आप उस पर क्लिक करेंगे और संक्रमण पूरा होने के बाद हटा दिया जाएगा:

$("#element").click( function () {
    $('#element').transition({ opacity: 0 }, function () { $(this).remove(); });
});

जेएस फिडेल डेमो

Comments

कॉलबैक काम नहीं कर रहा है - शायद यह ट्रांजिट की एपीआई में बदलाव के कारण है, मुझे नहीं पता, लेकिन फिडेल उदाहरण काम नहीं कर रहा है। यह एनिमेशन रन से पहले छिपाने की विधि को ट्रिगर करता है (क्रोम में आज़माया गया)

— जोनाथन लियुति 21'13

@JonathanLiuti ने FireFox 25, IE11, Chrome 31 का उपयोग करके परीक्षण किया। ठीक काम करता है।

— ROFLwTIME

हाँ @ROFLwTIME आप पूरी तरह से सही हैं - ऐसा लगता है कि मेरा क्रोम बस पागल हो रहा था। क्रोम के एक साफ पुनरारंभ के बाद आज फिडेल रिटायर्ड हो गया और यह उम्मीद के मुताबिक काम कर रहा है। मेरी गलती ! क्षमा करें 'यह एक डटकर।

— जोनाथन लियुती

Answer 3

एक animationendघटना है कि यहाँ प्रलेखन देखने के लिए देखा जा सकता है , सीएसएस transitionएनिमेशन के लिए भी आप इस transitionendघटना का उपयोग कर सकते हैं

वेनिला जेएस के साथ इन सभी कामों के लिए अतिरिक्त पुस्तकालयों की आवश्यकता नहीं है

document.getElementById("myDIV").addEventListener("transitionend", myEndFunction);
function myEndFunction() {
	this.innerHTML = "transition event ended";
}

#myDIV {transition: top 2s; position: relative; top: 0;}
div {background: #ede;cursor: pointer;padding: 20px;}

<div id="myDIV" onclick="this.style.top = '55px';">Click me to start animation.</div>

Comments

यह एक बॉर्डरलाइन लिंक-ओनली उत्तर है । आपको यहाँ पर अधिक से अधिक जानकारी शामिल करने के लिए अपने उत्तर का विस्तार करना चाहिए, और केवल संदर्भ के लिए लिंक का उपयोग करना चाहिए।

— गुडबाय StackExchange

इसे पहले वोट करना क्योंकि यह पहला ऐसा है जो jQuery पर निर्भर नहीं है। एक शाखा के लिए पूरे पेड़ को काटने का कोई मतलब नहीं है।

— एरोन मेसन

Answer 4

किसी के लिए भी यह आसान हो सकता है, यहाँ एक jQuery आश्रित फ़ंक्शन है जिसे मैंने CSS कक्षा के माध्यम से CSS एनीमेशन लागू करने के लिए सफलता प्राप्त की है, फिर बाद में कॉलबैक प्राप्त कर रहा है। यह पूरी तरह से काम नहीं कर सकता क्योंकि मेरे पास बैकबोन.जेएस ऐप में इसका उपयोग किया जा रहा था, लेकिन शायद यह उपयोगी है।

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/

---

अपडेट करें

उपरोक्त कोड और अन्य विकल्पों के साथ संघर्ष करने के बाद, मैं सुझाव दूंगा कि सीएसएस एनीमेशन समाप्त होने के लिए किसी भी सुनवाई के साथ बहुत सतर्क रहें। कई एनिमेशन चल रहे हैं, इससे ईवेंट सुनने में बहुत तेज़ी से गड़बड़ हो सकती है। मैं दृढ़ता से हर एनीमेशन के लिए GSAP जैसी एक एनीमेशन लाइब्रेरी का सुझाव दूंगा , यहां तक ​​कि छोटे लोगों के लिए भी।

Comments

इसे साझा करने के लिए धन्यवाद, मैंने इसका उपयोग किया है और इसे संपादित किया है e.stopImmediatePropagation(); self.trigger(this.whichAnimationEvent()); //for purge existing event callback.apply(self);

— बॉमले

Answer 5

वर्तमान में स्वीकृत उत्तर क्रोम में एनिमेशन के लिए दो बार फायर करता है। संभवत: ऐसा इसलिए है क्योंकि यह पहचान के 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);
        });

Comments

मैं फ़ंक्शन को कॉल करने का सुझाव दूंगा, जो एनिमेशन की घटनाओं से संबंधित है, इसके बजाय एनीमेशन ईवेंट ()।

— जैकब लॉके मैडसेन