Αυτό το άρθρο θα παρέχει τη διαδικασία εκτέλεσης μιας συνάρτησης JavaScript μετά από μια κινούμενη εικόνα CSS.
Πώς να εκτελέσετε JavaScript μετά την ολοκλήρωση της κινούμενης εικόνας CSS;
Η Javascript παρέχει το ' animations start ' & ' εμψύχωση ” συμβάντα που επιτρέπουν στον προγραμματιστή να εκτελέσει μια λειτουργία Javascript μόλις ξεκινήσει ή τελειώσει μια κινούμενη εικόνα. Αυτό καθιστά πολύ βολικό για τους προγραμματιστές να εκτελέσουν οποιαδήποτε λειτουργία μετά την ολοκλήρωση της κινούμενης εικόνας. Η σύνταξη για τη χρήση του ' εμψύχωση » η εκδήλωση έχει ως εξής:
{ HTML στοιχείο } . addEventListener ( 'ζωοποιώντας' , Όνομα συνάρτησης ) ;
Στην παραπάνω παρεχόμενη σύνταξη, το « εμψύχωση ” παρέχεται ως το πρώτο όρισμα στον ακροατή συμβάντων, ακολουθούμενο από τη συνάρτηση που θα εκτελεστεί μόλις τελειώσει η κινούμενη εικόνα. ένα ' ακροατής εκδήλωσης ' στο Javascript ενεργοποιεί τη συνάρτηση που του δίνεται κάθε φορά που συμβαίνει ένα συγκεκριμένο γεγονός.
Ας καταλάβουμε πώς ένας χρήστης μπορεί να εκτελέσει μια συνάρτηση JavaScript μετά από μια κινούμενη εικόνα CSS χρησιμοποιώντας τη σύνταξη που ορίζεται παραπάνω. Σε αυτήν την επίδειξη, ένα κουτί κινείται για να μετακινηθεί προς τα κάτω και να επανέλθει ξανά σε ' τέσσερα ” δευτερόλεπτα. Αφού ολοκληρωθεί η κινούμενη εικόνα, θα εμφανιστεί ένα μήνυμα χρησιμοποιώντας μια λειτουργία JavaScript.
< html >
< στυλ >
#myDIV {
πλάτος : 150 εικονοστοιχεία ;
ύψος : 150 εικονοστοιχεία ;
θέση : συγγενής ;
Ιστορικό : ανοιχτό πράσινο ;
}
@keyframes moveBox {
0 % { μπλουζα : 0 εικονοστοιχεία ; }
πενήντα % { μπλουζα : 200 px ; Ιστορικό : ροζ ; }
100 % { μπλουζα : 0 εικονοστοιχεία ; Ιστορικό : ανοιχτό πράσινο ; }
}
στυλ >
< σώμα >
< h1 > Εκτέλεση JavaScript Μετά το CSS Κινουμένων σχεδίων h1 >
< h3 > Κάντε κλικ στο Κάτω τετράγωνο για να ξεκινήσετε την κινούμενη εικόνα h3 >
< p id = 'Για' Π >
< div id = 'myDIV' στο κλικ = 'myFunction()' div >
< γραφή >
συνθ div1 = έγγραφο. getElementById ( 'myDIV' ) ;
συνθ Για = έγγραφο. getElementById ( 'Για' ) ;
λειτουργία myFunction ( ) {
div1. στυλ . κινουμένων σχεδίων = 'moveBox 6s' ;
}
div1. addEventListener ( 'κινούμενα σχέδια' , Λειτουργία εκκίνησης ) ;
div1. addEventListener ( 'ζωοποιώντας' , endFunction ) ;
λειτουργία εκκίνησης ( ) {
Για. innerHTML = 'Το animation ξεκίνησε...' ;
}
λειτουργία endFunction ( ) {
Για. innerHTML = 'Το animation τελείωσε!' ;
Για. στυλ . χρώμα = 'το κόκκινο' ;
}
γραφή >
σώμα >
html >
Η επεξήγηση του παραπάνω κώδικα έχει ως εξής:
- Στο ' <στυλ> ' ετικέτες, το στοιχείο με αναγνωριστικό ' myDIV ” παρέχεται με ιδιότητες CSS.
- Στη συνέχεια, ένα « βασικό καρέ 'με όνομα' moveBox ” δημιουργείται για σκοπούς κινουμένων σχεδίων. Έχει τρεις μεταβατικές καταστάσεις. Η πρώτη μετάβαση θα γίνει από « 0% ' προς την ' πενήντα% '. Στη συνέχεια, η επόμενη μετάβαση θα είναι από ' πενήντα% ' προς την ' 100% '.
- Στη συνέχεια, μέσα στις ετικέτες σώματος, το ' h1 ' & ' h3 ” δημιουργούνται στοιχεία.
- ΕΝΑ ' 'στοιχείο με αναγνωριστικό' Για ' δημιουργειται.
- ΕΝΑ ' div 'στοιχείο με το αναγνωριστικό' myDIV ' δημιουργειται. Επίσης, μια συνάρτηση με το όνομα ' myFunction() ' παρέχεται στο ' στο κλικ ” χαρακτηριστικό του στοιχείου div.
- Στη συνέχεια, μέσα στο « <σενάριο> ” ετικέτες, δημιουργούνται δύο σταθερές. Αυτές οι σταθερές δείχνουν προς τα στοιχεία HTML χρησιμοποιώντας το ' .getElementByID() 'μέθοδος.
- Μια συνάρτηση με το όνομα ' myFunction() ' δημιουργειται. Αυτή η λειτουργία θα κινήσει το ' myDIV ' στοιχείο χρησιμοποιώντας το ' moveBox ” βασικά καρέ.
- Στη συνέχεια, δημιουργούνται δύο ακροατές συμβάντων που καλούν τις καθορισμένες συναρτήσεις στο ' animations start «εκδήλωση και το « εμψύχωση ' Εκδήλωση.
- Στη συνέχεια, ορίζονται δύο συναρτήσεις για τα προαναφερθέντα συμβάντα.
Παραγωγή:
Μπορεί να φανεί στην παρακάτω έξοδο όταν ο χρήστης κάνει κλικ στο πλαίσιο, ξεκινά η κινούμενη εικόνα. Στη διαδικασία κινούμενης εικόνας, το πλαίσιο αλλάζει, μετακινείται 200 px προς τα κάτω και επιστρέφει στην αρχική του θέση. Κατά τη διάρκεια της κίνησης, το χρώμα του αλλάζει επίσης από πράσινο σε ροζ και μετά σε πράσινο ξανά. Στη συνέχεια, το μήνυμα « Το animation τελείωσε! ' εμφανίζεται χρησιμοποιώντας μια συνάρτηση Javascript που εκτελείται μετά την ολοκλήρωση της κίνησης CSS.
Αυτό αφορά την εκτέλεση μιας συνάρτησης JavaScript μετά την ολοκλήρωση της κίνησης CSS.
συμπέρασμα
Για να εκτελέσετε μια λειτουργία JavaScript μετά την ολοκλήρωση μιας κινούμενης εικόνας CSS, ο χρήστης μπορεί να χρησιμοποιήσει ένα πρόγραμμα ακρόασης συμβάντων. Για αυτό, ο χρήστης πρέπει να παρέχει το « εμψύχωση ” συμβάν ως το πρώτο όρισμα και μια συνάρτηση ως δεύτερο όρισμα στον ακροατή συμβάντος. Η καθορισμένη λειτουργία θα εκτελεστεί αφού ολοκληρωθεί η κινούμενη εικόνα. Αυτό το άρθρο παρέχει τη διαδικασία για την εκτέλεση μιας συνάρτησης Javascript μετά από μια κίνηση CSS.