यह आलेख सीएसएस एनीमेशन के बाद जावास्क्रिप्ट फ़ंक्शन चलाने की प्रक्रिया प्रदान करेगा।
सीएसएस एनीमेशन समाप्त होने के बाद जावास्क्रिप्ट कैसे चलाएं?
जावास्क्रिप्ट प्रदान करता है ' एनीमेशनस्टार्ट ' और ' animating ऐसी घटनाएँ जो एनीमेशन शुरू होने या समाप्त होने पर डेवलपर को जावास्क्रिप्ट फ़ंक्शन चलाने देती हैं। इससे डेवलपर्स के लिए एनीमेशन समाप्त होने के बाद कोई भी ऑपरेशन करना वास्तव में सुविधाजनक हो जाता है। ' का उपयोग करने के लिए वाक्यविन्यास animating घटना इस प्रकार है:
{ एचटीएमएल तत्व } . addEventListener ( 'एनिमेटेड' , फ़ंक्शननाम ) ;
ऊपर दिए गए सिंटैक्स में, ' animating 'ईवेंट श्रोता को पहले तर्क के रूप में प्रदान किया जाता है, उसके बाद फ़ंक्शन दिया जाता है जिसे एनीमेशन समाप्त होने के बाद निष्पादित किया जाएगा। एक ' घटना श्रोता जब भी कोई विशिष्ट घटना घटती है तो जावास्क्रिप्ट में दिए गए फ़ंक्शन को सक्रिय कर दिया जाता है।
आइए समझें कि उपरोक्त परिभाषित सिंटैक्स का उपयोग करके कोई उपयोगकर्ता सीएसएस एनीमेशन के बाद जावास्क्रिप्ट फ़ंक्शन कैसे चला सकता है। इस प्रदर्शन में, एक बॉक्स को नीचे जाने और फिर से ऊपर आने के लिए एनिमेटेड किया गया है। चार “सेकेंड. एनीमेशन पूरा होने के बाद, जावास्क्रिप्ट फ़ंक्शन का उपयोग करके एक संदेश प्रदर्शित किया जाएगा।
< एचटीएमएल >
< शैली >
#myDIV {
चौड़ाई : 150px ;
ऊंचाई : 150px ;
पद : रिश्तेदार ;
पृष्ठभूमि : हल्का हरा ;
}
@कीफ्रेम्स मूवबॉक्स {
0 % { शीर्ष : 0px ; }
पचास % { शीर्ष : 200px ; पृष्ठभूमि : गुलाबी ; }
100 % { शीर्ष : 0px ; पृष्ठभूमि : हल्का हरा ; }
}
शैली >
< शरीर >
< एच 1 > के बाद जावास्क्रिप्ट चलाना सीएसएस एनिमेशन एच 1 >
< h3 > एनीमेशन शुरू करने के लिए नीचे दिए गए वर्ग पर क्लिक करें h3 >
< पी आईडी = 'के लिए' > पी >
< डिव आईडी = 'myDIV' क्लिक पर = 'मायफंक्शन()' > डिव >
< लिखी हुई कहानी >
कॉन्स्ट div1 = दस्तावेज़। getElementById ( 'myDIV' ) ;
कॉन्स्ट के लिए = दस्तावेज़। getElementById ( 'के लिए' ) ;
मेराफ़ंक्शन कार्य करें ( ) {
div1. शैली . एनिमेशन = 'मूवबॉक्स 6s' ;
}
div1. addEventListener ( 'एनीमेशनस्टार्ट' , प्रारंभकार्य ) ;
div1. addEventListener ( 'एनिमेटेड' , अंतफ़ंक्शन ) ;
फ़ंक्शन प्रारंभफ़ंक्शन ( ) {
के लिए। आंतरिक HTML = 'एनीमेशन शुरू हो गया है...' ;
}
फ़ंक्शन अंतफ़ंक्शन ( ) {
के लिए। आंतरिक HTML = 'एनीमेशन समाप्त हो गया है!' ;
के लिए। शैली . रंग = 'लाल' ;
}
लिखी हुई कहानी >
शरीर >
एचटीएमएल >
उपरोक्त कोड की व्याख्या इस प्रकार है:
- में ' <शैली> 'टैग, आईडी वाला तत्व' myDIV ” सीएसएस गुणों के साथ प्रदान किया गया है।
- अगला, एक ' मुख्य-फ़्रेम 'नामांकित' मूवबॉक्स एनीमेशन प्रयोजनों के लिए बनाया गया है। इसकी तीन संक्रमणकालीन अवस्थाएँ हैं। पहला परिवर्तन “से होगा” 0% ' को ' पचास% ”। फिर, अगला परिवर्तन 'से होगा' पचास% ' को ' 100% ”।
- फिर, बॉडी टैग के अंदर, ' एच 1 ' और ' h3 'तत्व निर्मित होते हैं।
- ए ' <पी> 'आईडी के साथ तत्व' के लिए ' बनाया गया है।
- ए ' डिव 'आईडी के साथ तत्व' myDIV ' बनाया गया है। इसके अलावा, एक फ़ंक्शन जिसका नाम ' मेराफ़ंक्शन() 'को प्रदान किया जाता है' क्लिक पर '' div तत्व की विशेषता.
- अगला, 'के अंदर <स्क्रिप्ट> टैग, दो स्थिरांक बनाए जाते हैं। ये स्थिरांक '' का उपयोग करके HTML तत्वों की ओर इशारा करते हैं .getElementByID() ' तरीका।
- एक फ़ंक्शन जिसका नाम ' मेराफ़ंक्शन() ' बनाया गया है। यह फ़ंक्शन 'एनिमेट करेगा' myDIV 'तत्व' का उपयोग कर मूवबॉक्स 'कुंजीफ़्रेम.
- इसके बाद, दो ईवेंट श्रोता बनाए जाते हैं जो निर्दिष्ट फ़ंक्शन को 'पर कॉल करते हैं एनीमेशनस्टार्ट 'घटना और' animating ' आयोजन।
- फिर, उपर्युक्त घटनाओं के लिए दो फ़ंक्शन परिभाषित किए गए हैं।
आउटपुट:
इसे नीचे दिए गए आउटपुट में देखा जा सकता है जब उपयोगकर्ता बॉक्स पर क्लिक करता है, तो एनीमेशन शुरू हो जाता है। एनीमेशन प्रक्रिया में, बॉक्स बदलता है, 200px नीचे चला जाता है और अपने मूल स्थान पर वापस आ जाता है। गति के दौरान इसका रंग भी हरे से गुलाबी और फिर हरे में बदल जाता है। अगला, संदेश ' एनीमेशन समाप्त हो गया है! ” एक जावास्क्रिप्ट फ़ंक्शन का उपयोग करके प्रदर्शित किया जाता है जिसे सीएसएस एनीमेशन समाप्त होने के बाद निष्पादित किया जाता है।
यह सब सीएसएस एनीमेशन खत्म करने के बाद जावास्क्रिप्ट फ़ंक्शन चलाने के बारे में है।
निष्कर्ष
सीएसएस एनीमेशन समाप्त होने के बाद जावास्क्रिप्ट फ़ंक्शन चलाने के लिए, उपयोगकर्ता एक इवेंट श्रोता का उपयोग कर सकता है। इसके लिए, उपयोगकर्ता को ' प्रदान करना होगा animating 'पहला तर्क के रूप में घटना, और घटना श्रोता के लिए दूसरे तर्क के रूप में एक फ़ंक्शन। एनीमेशन समाप्त होने के बाद निर्दिष्ट फ़ंक्शन निष्पादित किया जाएगा। इस आलेख में सीएसएस एनीमेशन के बाद जावास्क्रिप्ट फ़ंक्शन चलाने की प्रक्रिया प्रदान की गई है।