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

Question

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

Comments

stackoverflow.com/questions/5023514/…

— zloctb

Answer 1

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

उनका उदाहरण (कई लाइनों में सुधार):

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

Comments

वहाँ अन्य ब्राउज़र के लिए एक ही बात है तो webkit?

— मेयो

हाँ, मोज़िला के लिए 'ट्रांज़ेंडेंड' और ओपेरा में 'ऑट्रांसिशनएंड'।

— 13

आखिर में झूठ क्या करता है?

— मेओ

@meo thisकॉलबैक के अंदर तत्व के साथ कुछ करना है । लेकिन इसका एक आवश्यक पैरामीटर है, इसलिए इस मामले में इसकी बस आवश्यकता को पूरा करना है।

— डौग नेयनेर 19:11

@DougNeiner अंत में गलत है useCaptureMode। जब कोई घटना होती है, तो दो चरण होते हैं - पहला चरण कैप्चर मोड है, दूसरा बबल मोड है। कैप्चर मोड में, घटना शरीर तत्व से निर्दिष्ट तत्व तक उतरती है। यह तब बुलबुला मोड में प्रवेश करता है, जहां यह रिवर्स करता है। यह अंतिम गलत परम निर्दिष्ट करता है कि आप चाहते हैं कि इवेंट श्रोता बबल मोड में हो। इसका एक उपयोग बबल मोड में आवश्यक होने से पहले इवेंट हैंडलर संलग्न करना है। =) 37signals.com/svn/posts/…

— rybosome

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) 

नोट: संक्रमण घटना के अंत का नाम पाने के लिए आप उत्तर के रूप में पोस्ट की गई विधि का उपयोग कर सकते हैं: मैं ब्राउज़रों में CSS3 के संक्रमण कार्यों को कैसे सामान्य करूं? ।

नोट: यह प्रश्न भी संबंधित है: - CSS3 संक्रमण घटनाओं

Comments

यह स्वीकार किए जाते हैं की तुलना में बहुत भरा जवाब है। यह अधिक अपवित्र क्यों नहीं है।

— वेस

कॉल करने के लिए याद रखें transitionEndedHandlerमें transitionEnded(या परिवर्तन transitionEndedद्वारा transitionEndedHandlerमें addEventListenerऔर removeEventListenerऔर कॉल transitionEndedमें transitionEndedHandler)

— Miquel

धन्यवाद @Miquel; मुझे लगता है कि मैं अभी-अभी इस्तेमाल किया transitionEndedथा transitionEndedHandler।

— मार्क रोड्स

मेरा मानना ​​है कि इसके लिए क्रोमियम मुद्दा यहां पाया जा सकता है: code.google.com/p/chromium/issues/detail?id=388082 हालांकि, अंतिम टिप्पणी (मेरे विचार में गलत है) इसे बग के रूप में छूट देती है और इसलिए वर्तमान में "ठीक नहीं होगा" के रूप में चिह्नित किया गया है।

— विलस्टर

आजकल अलग-अलग नामों की कोई आवश्यकता नहीं है caniuse.com/#feat=css-transitions

— जुआन मेंडेस

Answer 3

मैं निम्नलिखित कोड का उपयोग कर रहा हूं, यह पता लगाने की कोशिश करने की तुलना में बहुत सरल है कि कौन सा विशिष्ट एंड इवेंट एक ब्राउज़र का उपयोग करता है।

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

---

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

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

यह क्योंकि वे बूटस्ट्रैप में निम्नलिखित शामिल हैं। 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);

Comments

यह धीमा है क्योंकि इसे उस पूरी सूची के माध्यम से हर बार घटना को देखना होता है कि क्या यह सही है।

— फ़्रीकहेड

@ एफ्रकहेड इनमें से किसी भी दृष्टिकोण का प्रदर्शन बहुत समान होगा

— टॉम

Answer 4

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

Answer 5

यह आसानी से transitionendइवेंट देखने के दस्तावेज के साथ प्राप्त किया जा सकता है एक सरल उदाहरण:

document.getElementById("button").addEventListener("transitionend", myEndFunction);

function myEndFunction() {
	this.innerHTML = "Transition event ended";
}

#button {transition: top 2s; position: relative; top: 0;}

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

Comments

यह आजकल सही उत्तर है, अब कोई उपसर्ग करने की आवश्यकता नहीं है। caniuse.com/#feat=css-transitions

— जुआन मेंडेस