CSS3 के एनीमेशन के पूरा होने पर कॉलबैक है?

Question

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

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

Comments

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

— givanse

यदि आप सरल सीएसएस कार्रवाई करना चाहते हैं, उदाहरण के लिए, इसके संक्रमण के बाद तत्व को छिपाएं, हो सकता है कि आपको कॉलबैक की आवश्यकता न हो और इसके बजाय, आप एनीमेशन की कीफ्रेम के साथ अपनी समस्या को हल कर सकते हैं।

— मद्मदी

Answer 1

हाँ वहाँ है। कॉलबैक एक ईवेंट है, इसलिए आपको इसे पकड़ने के लिए ईवेंट श्रोता को जोड़ना होगा। यह jQuery के साथ एक उदाहरण है:

$("#sun").bind('oanimationend animationend webkitAnimationEnd', function() { 
   alert("fin") 
});

या शुद्ध जेएस:

element.addEventListener("webkitAnimationEnd", callfunction,false);
element.addEventListener("animationend", callfunction,false);
element.addEventListener("oanimationend", callfunction,false);

लाइव डेमो: http://jsfiddle.net/W3y7h/

Comments

IE10 के लिए यह 'MSAnimationEnd' है (देखें msdn.microsoft.com/en-us/ie/hh272902#_CSSAnimations )

— मार्टिन विटेमैन

यह transitionendनहीं है animationend।

@MichaelJones नहीं, यह css3 संक्रमण के लिए है। सवाल एनिमेशन के बारे में था।

— जोशवर्मायर

animationend @MartinWittemann IE10 फाइनल अब msdn.microsoft.com/en-us/library/ie/… का उपयोग करता है । @ हस्की कोड क्रोम और एफएफ 14 में काम करता है, अपडेटेड

— फिडेल

का डुप्लीकेट stackoverflow.com/questions/9255279/... एक और अधिक पूर्ण समाधान है जो

— vanthome

Answer 2

आपके लिए कॉलबैक करने का एक आसान तरीका यह भी है कि आपके CSS3 के संक्रमण / ब्राउज़र कॉम्पिटिशन को भी हैंडल किया जाए, यह jQuery ट्रांज़िट प्लगइन है । उदाहरण:

//Pulsing, moving element
$("#element").click( function () {
    $('#element').transition({ opacity: 0, x: '75%' }, function () { $(this).transition({ opacity: 1, x: '0%' }).trigger("click"); });
});

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

Comments

इसके लिए बोनस पॉइंट jQuery चेतन के साथ एपीआई युक्ति साझा करने के लिए है, लेकिन अभी भी सीएसएस एनिमेशन के हार्डवेयर प्रदान की चिकनाई का लाभ ले रहा है। हमने इसके साथ सभी स्थानों पर jQuery के चेतन को बहुत बदल दिया है।

— लोगन