एनिमेशनएंड इवेंट
उदाहरण
एक सीएसएस एनीमेशन समाप्त होने पर <div> तत्व के साथ कुछ करें:
var x = document.getElementById("myDIV");
// Code for Chrome, Safari and Opera
x.addEventListener("webkitAnimationEnd", myEndFunction);
// Standard syntax
x.addEventListener("animationend", myEndFunction);
परिभाषा और उपयोग
एनीमेशनएंड इवेंट तब होता है जब एक सीएसएस एनीमेशन पूरा हो गया है।
CSS एनिमेशन के बारे में अधिक जानकारी के लिए, CSS3 एनिमेशन पर हमारा ट्यूटोरियल देखें ।
जब कोई CSS एनिमेशन चलता है, तो तीन घटनाएं हो सकती हैं:
- एनीमेशनस्टार्ट - तब होता है जब सीएसएस एनीमेशन शुरू हो गया है
- एनीमेशन -पुनरावृत्ति - तब होता है जब सीएसएस एनीमेशन दोहराया जाता है
- एनीमेशनएंड - तब होता है जब सीएसएस एनीमेशन पूरा हो गया है
ब्राउज़र समर्थन
तालिका में संख्याएं पहले ब्राउज़र संस्करण को निर्दिष्ट करती हैं जो पूरी तरह से ईवेंट का समर्थन करता है।
"वेबकिट" या "मोज़" के बाद की संख्याएं पहले संस्करण को निर्दिष्ट करती हैं जो उपसर्ग के साथ काम करती है।
Event | |||||
---|---|---|---|---|---|
animationend | 4.0 webkit | 10.0 | 16.0 5.0 moz |
4.0 webkit | 15.0 webkit 12.1 |
नोट: क्रोम, सफारी और ओपेरा के लिए, webkitAnimationEnd उपसर्ग का उपयोग करें।
वाक्य - विन्यास
object.addEventListener("webkitAnimationEnd", myScript); // Code for Chrome, Safari and Opera
object.addEventListener("animationend", myScript); // Standard syntax
नोट: AddEventListener () विधि Internet Explorer 8 और पुराने संस्करणों में समर्थित नहीं है।
टेक्निकल डिटेल
बुलबुले: | हां |
---|---|
रद्द करने योग्य: | नहीं |
घटना प्रकार: | एनिमेशनइवेंट |
डोम संस्करण: | स्तर 3 की घटनाएँ |
संबंधित पृष्ठ
सीएसएस ट्यूटोरियल: CSS3 एनिमेशन
सीएसएस संदर्भ: CSS3 एनीमेशन संपत्ति
एचटीएमएल डोम संदर्भ: स्टाइल एनीमेशन संपत्ति