מאמר זה יספק את ההליך להפעלת פונקציית JavaScript לאחר הנפשת CSS.
כיצד להפעיל JavaScript לאחר סיום הנפשת CSS?
Javascript מספק את ' אנימציה התחל ' & ' אנימציה אירועים המאפשרים למפתח להפעיל פונקציית Javascript ברגע שהאנימציה מתחילה או מסתיימת. זה עושה את זה ממש נוח למפתחים לבצע כל פעולה לאחר סיום האנימציה. התחביר לשימוש ב' אנימציה ' האירוע הוא כדלקמן:
{ HTML אֵלֵמֶנט } . addEventListener ( 'מחייה' , שם פונקציה ) ;
בתחביר שצוין לעיל, ' אנימציה ” מסופק כארגומנט הראשון למאזין האירועים, ואחריו הפונקציה שתבוצע לאחר סיום האנימציה. ' מאזין אירועים ” ב-Javascript מפעיל את הפונקציה שניתנה לו בכל פעם שמתרחש אירוע ספציפי.
בואו נבין כיצד משתמש יכול להפעיל פונקציית JavaScript לאחר הנפשת CSS באמצעות התחביר שהוגדר לעיל. בהדגמה זו, תיבה מונפשת כדי לנוע למטה ולעלות שוב ב' ארבע ' שניות. לאחר השלמת האנימציה, תוצג הודעה באמצעות פונקציית JavaScript.
< html >
< סִגְנוֹן >
#myDIV {
רוֹחַב : 150 פיקסלים ;
גוֹבַה : 150 פיקסלים ;
עמדה : קרוב משפחה ;
רקע כללי : ירוק בהיר ;
}
@keyframes moveBox {
0 % { חלק עליון : 0px ; }
חמישים % { חלק עליון : 200 פיקסלים ; רקע כללי : וָרוֹד ; }
100 % { חלק עליון : 0px ; רקע כללי : ירוק בהיר ; }
}
סִגְנוֹן >
< גוּף >
< h1 > הפעלת JavaScript לאחר ה CSS אנימציה h1 >
< h3 > לחץ על הריבוע למטה כדי להתחיל את האנימציה h3 >
< p id = 'ל' > ע >
< מזהה div = 'myDIV' בלחיצה = 'myFunction()' > div >
< תַסרִיט >
const div1 = מסמך. getElementById ( 'myDIV' ) ;
const ל = מסמך. getElementById ( 'ל' ) ;
function myFunction ( ) {
div1. סִגְנוֹן . אנימציה = 'moveBox 6s' ;
}
div1. addEventListener ( 'התחלת אנימציה' , startFunction ) ;
div1. addEventListener ( 'מחייה' , endFunction ) ;
פונקציה startFunction ( ) {
ל. innerHTML = 'האנימציה התחילה...' ;
}
function endFunction ( ) {
ל. innerHTML = 'האנימציה הסתיימה!' ;
ל. סִגְנוֹן . צֶבַע = 'אָדוֹם' ;
}
תַסרִיט >
גוּף >
html >
ההסבר של הקוד לעיל הוא כדלקמן:
- בתוך ה ' <סגנון> ' תגיות, האלמנט עם id ' myDIV ” מסופק עם מאפייני CSS.
- לאחר מכן, ' מסגרת מפתח 'שם' moveBox ' נוצר למטרות אנימציה. יש לו שלושה מצבי מעבר. המעבר הראשון יהיה מ' 0% ' ל ' חמישים% '. לאחר מכן, המעבר הבא יהיה מ' חמישים% ' ל ' 100% '.
- ואז, בתוך תגי הגוף, ה' h1 ' & ' h3 נוצרים אלמנטים.
- א ' ' רכיב עם מזהה ' ל ' נוצר.
- א ' div ' רכיב עם המזהה ' myDIV ' נוצר. כמו כן, פונקציה בשם ' myFunction() ' מסופק ל' בלחיצה ' תכונה של אלמנט div.
- לאחר מכן, בתוך '