ఈ కథనం CSS యానిమేషన్ తర్వాత జావాస్క్రిప్ట్ ఫంక్షన్‌ను అమలు చేసే విధానాన్ని అందిస్తుంది.
CSS యానిమేషన్ పూర్తయిన తర్వాత జావాస్క్రిప్ట్‌ను ఎలా అమలు చేయాలి?
జావాస్క్రిప్ట్ అందిస్తుంది “ యానిమేషన్ ప్రారంభం ” &” యానిమేటింగ్ ”యానిమేషన్ ప్రారంభమైన తర్వాత లేదా ముగిసిన తర్వాత డెవలపర్‌ని జావాస్క్రిప్ట్ ఫంక్షన్‌ని అమలు చేయడానికి అనుమతించే ఈవెంట్‌లు. యానిమేషన్ పూర్తయిన తర్వాత డెవలపర్‌లు ఏదైనా ఆపరేషన్ చేయడానికి ఇది నిజంగా సౌకర్యవంతంగా ఉంటుంది. 'ని ఉపయోగించడం కోసం వాక్యనిర్మాణం యానిమేటింగ్ ” ఈవెంట్ ఇలా ఉంది:
{ HTML మూలకం } . addEventListener ( 'యానిమేటింగ్' , ఫంక్షన్ పేరు ) ;
పైన అందించిన సింటాక్స్‌లో, “ యానిమేటింగ్ ” ఈవెంట్ శ్రోతకి మొదటి ఆర్గ్యుమెంట్‌గా అందించబడుతుంది, ఆ తర్వాత యానిమేషన్ ముగిసిన తర్వాత ఫంక్షన్ అమలు చేయబడుతుంది. ఒక ' ఈవెంట్ వినేవాడు ” జావాస్క్రిప్ట్‌లో నిర్దిష్ట ఈవెంట్ జరిగినప్పుడల్లా దానికి ఇచ్చిన ఫంక్షన్‌ని తొలగిస్తుంది.
పైన నిర్వచించిన సింటాక్స్‌ని ఉపయోగించి CSS యానిమేషన్ తర్వాత వినియోగదారు JavaScript ఫంక్షన్‌ను ఎలా అమలు చేయగలరో అర్థం చేసుకుందాం. ఈ ప్రదర్శనలో, ఒక పెట్టె క్రిందికి కదిలి మళ్లీ పైకి రావడానికి యానిమేట్ చేయబడింది “ నాలుగు ” సెకన్లు. యానిమేషన్ పూర్తయిన తర్వాత, జావాస్క్రిప్ట్ ఫంక్షన్‌ని ఉపయోగించి సందేశం ప్రదర్శించబడుతుంది.
< html >
< శైలి >
#myDIV {
వెడల్పు : 150px ;
ఎత్తు : 150px ;
స్థానం : బంధువు ;
నేపథ్య : లేత ఆకుపచ్చ ;
}
@keyframes మూవ్‌బాక్స్ {
0 % { టాప్ : 0px ; }
యాభై % { టాప్ : 200px ; నేపథ్య : గులాబీ రంగు ; }
100 % { టాప్ : 0px ; నేపథ్య : లేత ఆకుపచ్చ ; }
}
శైలి >
< శరీరం >
< h1 > జావాస్క్రిప్ట్ తర్వాత రన్ అవుతోంది CSS యానిమేషన్ h1 >
< h3 > యానిమేషన్‌ను ప్రారంభించడానికి దిగువ స్క్వేర్‌పై క్లిక్ చేయండి h3 >
< p id = 'కోసం' > p >
< div id = 'myDIV' క్లిక్ చేయండి = 'myFunction()' > div >
< స్క్రిప్ట్ >
స్థిరంగా div1 = పత్రం. getElementById ( 'myDIV' ) ;
స్థిరంగా కోసం = పత్రం. getElementById ( 'కోసం' ) ;
ఫంక్షన్ myFunction ( ) {
div1. శైలి . యానిమేషన్ = 'moveBox 6s' ;
}
div1. addEventListener ( 'యానిమేషన్ ప్రారంభం' , ప్రారంభం ఫంక్షన్ ) ;
div1. addEventListener ( 'యానిమేటింగ్' , ముగింపు ఫంక్షన్ ) ;
ఫంక్షన్ startFunction ( ) {
కోసం. అంతర్గత HTML = 'యానిమేషన్ మొదలైంది...' ;
}
ఫంక్షన్ endFunction ( ) {
కోసం. అంతర్గత HTML = 'యానిమేషన్ ముగిసింది!' ;
కోసం. శైలి . రంగు = 'ఎరుపు' ;
}
స్క్రిప్ట్ >
శరీరం >
html >
పై కోడ్ యొక్క వివరణ క్రింది విధంగా ఉంది:
- లో ' <శైలి> 'ట్యాగ్‌లు, ఐడితో మూలకం' myDIV ” CSS లక్షణాలతో అందించబడింది.
- తరువాత, ఒక ' కీఫ్రేమ్ ' అనే ' మూవ్‌బాక్స్ ” యానిమేషన్ ప్రయోజనాల కోసం సృష్టించబడింది. ఇది మూడు పరివర్తన స్థితులను కలిగి ఉంది. మొదటి పరివర్తన ' నుండి 0% ' నుండి ' యాభై% ”. అప్పుడు, తదుపరి పరివర్తన ' నుండి ఉంటుంది యాభై% ' నుండి ' 100% ”.
- అప్పుడు, శరీరం ట్యాగ్‌ల లోపల, “ h1 ” &” h3 ” మూలకాలు సృష్టించబడ్డాయి.
- ఎ' 'ఐడితో మూలకం' కోసం ” సృష్టించబడింది.
- ఎ' div 'ఐడితో మూలకం' myDIV ” సృష్టించబడింది. అలాగే, '' అనే ఫంక్షన్ myFunction() 'కి అందించబడింది' క్లిక్ చేయండి ' div మూలకం యొక్క లక్షణం.
- తరువాత, లోపల ' <స్క్రిప్ట్> ” ట్యాగ్‌లు, రెండు స్థిరాంకాలు సృష్టించబడతాయి. ఈ స్థిరాంకాలు “ని ఉపయోగించి HTML మూలకాల వైపు చూపుతాయి .getElementByID() ” పద్ధతి.
- పేరు ' myFunction() ” సృష్టించబడింది. ఈ ఫంక్షన్ యానిమేట్ చేస్తుంది ' myDIV 'మూలకం' ఉపయోగించి మూవ్‌బాక్స్ ”కీఫ్రేమ్‌లు.
- తరువాత, 'పై పేర్కొన్న ఫంక్షన్‌లను పిలిచే ఇద్దరు ఈవెంట్ శ్రోతలు సృష్టించబడ్డారు. యానిమేషన్ ప్రారంభం 'సంఘటన మరియు' యానిమేటింగ్ ” ఈవెంట్.
- అప్పుడు, పైన పేర్కొన్న సంఘటనల కోసం రెండు విధులు నిర్వచించబడ్డాయి.
అవుట్‌పుట్:
వినియోగదారు బాక్స్‌పై క్లిక్ చేసినప్పుడు, యానిమేషన్ ప్రారంభమైనప్పుడు దిగువ అవుట్‌పుట్‌లో ఇది చూడవచ్చు. యానిమేషన్ ప్రక్రియలో, పెట్టె మారుతుంది, 200px క్రిందికి కదులుతుంది మరియు దాని అసలు స్థానానికి తిరిగి వస్తుంది. కదలిక సమయంలో, దాని రంగు కూడా ఆకుపచ్చ నుండి గులాబీకి మరియు మళ్లీ ఆకుపచ్చగా మారుతుంది. తరువాత, సందేశం ' యానిమేషన్ ముగిసింది! ” CSS యానిమేషన్ పూర్తయిన తర్వాత అమలు చేయబడిన జావాస్క్రిప్ట్ ఫంక్షన్‌ని ఉపయోగించి ప్రదర్శించబడుతుంది.
CSS యానిమేషన్‌ను పూర్తి చేసిన తర్వాత JavaScript ఫంక్షన్‌ను అమలు చేయడం గురించి అంతే.
ముగింపు
CSS యానిమేషన్ పూర్తయిన తర్వాత JavaScript ఫంక్షన్‌ను అమలు చేయడానికి, వినియోగదారు ఈవెంట్ లిజనర్‌ని ఉపయోగించవచ్చు. దాని కోసం, వినియోగదారు అందించాలి “ యానిమేటింగ్ ” ఈవెంట్ మొదటి వాదనగా, మరియు ఈవెంట్ శ్రోతకి రెండవ ఆర్గ్యుమెంట్‌గా ఫంక్షన్. యానిమేషన్ పూర్తయిన తర్వాత పేర్కొన్న ఫంక్షన్ అమలు చేయబడుతుంది. ఈ కథనం CSS యానిమేషన్ తర్వాత జావాస్క్రిప్ట్ ఫంక్షన్‌ని అమలు చేసే విధానాన్ని అందించింది.