یہ مضمون CSS اینیمیشن کے بعد JavaScript فنکشن کو چلانے کا طریقہ کار فراہم کرے گا۔
سی ایس ایس اینیمیشن ختم ہونے کے بعد جاوا اسکرپٹ کو کیسے چلایا جائے؟
جاوا اسکرپٹ فراہم کرتا ہے ' اینیمیشن شروع 'اور' متحرک ایسے واقعات جو ایک اینیمیشن شروع ہونے یا ختم ہونے پر ڈویلپر کو جاوا اسکرپٹ کا فنکشن چلانے دیتے ہیں۔ اس سے ڈیولپرز کے لیے اینیمیشن ختم ہونے کے بعد کوئی بھی آپریشن کرنا واقعی آسان ہو جاتا ہے۔ استعمال کرنے کے لیے نحو ' متحرک ' واقعہ درج ذیل ہے:
{ ایچ ٹی ایم ایل عنصر } . EventListener شامل کریں۔ ( 'متحرک' ، فنکشن کا نام ) ;
اوپر فراہم کردہ نحو میں، ' متحرک ” ایونٹ سننے والے کو پہلی دلیل کے طور پر فراہم کیا جاتا ہے، اس کے بعد وہ فنکشن ہوتا ہے جو حرکت پذیری کے ختم ہونے کے بعد عمل میں لایا جائے گا۔ ایک ' واقعہ سننے والا جاوا اسکرپٹ میں جب بھی کوئی خاص واقعہ ہوتا ہے تو اسے دیا گیا فنکشن فائر کرتا ہے۔
آئیے سمجھتے ہیں کہ سی ایس ایس اینیمیشن کے بعد اوپر بیان کردہ نحو کا استعمال کرتے ہوئے صارف جاوا اسکرپٹ فنکشن کیسے چلا سکتا ہے۔ اس مظاہرے میں، ایک باکس کو متحرک کیا جاتا ہے جو نیچے کی طرف بڑھتا ہے اور دوبارہ اوپر آتا ہے۔ چار 'سیکنڈ حرکت پذیری مکمل ہونے کے بعد، جاوا اسکرپٹ فنکشن کا استعمال کرتے ہوئے ایک پیغام دکھایا جائے گا۔
< html >
< انداز >
#myDIV {
چوڑائی : 150px ;
اونچائی : 150px ;
پوزیشن : رشتہ دار ;
پس منظر : ہلکا سبز ;
}
@keyframes moveBox {
0 % { سب سے اوپر : 0px ; }
پچاس % { سب سے اوپر : 200px ; پس منظر : گلابی ; }
100 % { سب سے اوپر : 0px ; پس منظر : ہلکا سبز ; }
}
انداز >
< جسم >
< h1 > کے بعد جاوا اسکرپٹ چل رہا ہے۔ سی ایس ایس حرکت پذیری h1 >
< h3 > اینیمیشن شروع کرنے کے لیے نیچے والے مربع پر کلک کریں۔ h3 >
< پی آئی ڈی = 'کے لیے' >> ص >
< div id = 'myDIV' کلک پر = 'myFunction()' >> div >
< سکرپٹ >
const div1 = دستاویز getElementById ( 'myDIV' ) ;
const کے لیے = دستاویز getElementById ( 'کے لیے' ) ;
فنکشن myFunction ( ) {
div1. انداز . حرکت پذیری = 'moveBox 6s' ;
}
div1. EventListener شامل کریں۔ ( 'اینیمیشن شروع' , startFunction ) ;
div1. EventListener شامل کریں۔ ( 'متحرک' , endFunction ) ;
فنکشن اسٹارٹ فنکشن ( ) {
کے لیے اندرونی ایچ ٹی ایم ایل = 'اینیمیشن شروع ہو گئی ہے...' ;
}
فنکشن اینڈ فنکشن ( ) {
کے لیے اندرونی ایچ ٹی ایم ایل = 'اینیمیشن ختم ہو گئی ہے!' ;
کے لیے انداز . رنگ = 'سرخ' ;
}
سکرپٹ >
جسم >
html >
مندرجہ بالا کوڈ کی وضاحت اس طرح ہے:
- میں '