W tym artykule opisano procedurę uruchamiania funkcji JavaScript po animacji CSS.
Jak uruchomić JavaScript po zakończeniu animacji CSS?
JavaScript zapewnia „ początek animacji ” i „ animowanie ” zdarzenia, które pozwalają programiście uruchomić funkcję JavaScript po rozpoczęciu lub zakończeniu animacji. Dzięki temu programiści mogą naprawdę wygodnie wykonywać dowolne operacje po zakończeniu animacji. Składnia używania „ animowanie ” wydarzenie wygląda następująco:
{ HTML element } . dodajEventListener ( „animowanie” , NazwaFunkcji ) ;
W podanej powyżej składni „ animowanie ” jest podawany jako pierwszy argument detektora zdarzeń, po którym następuje funkcja, która zostanie wykonana po zakończeniu animacji. Jakiś ' słuchacz zdarzeń ” w JavaScript uruchamia nadaną mu funkcję za każdym razem, gdy nastąpi określone zdarzenie.
Rozumiemy, jak użytkownik może uruchomić funkcję JavaScript po animacji CSS, korzystając z wyżej zdefiniowanej składni. W tej demonstracji animowane pudełko przesuwa się w dół i podnosi w „ cztery ' sekundy. Po zakończeniu animacji wyświetli się komunikat za pomocą funkcji JavaScript.
< HTML >
< styl >
#myDIV {
szerokość : 150 pikseli ;
wysokość : 150 pikseli ;
pozycja : względny ;
tło : jasnozielony ;
}
@keyframes moveBox {
0 % { szczyt : 0 pikseli ; }
pięćdziesiąt % { szczyt : 200 pikseli ; tło : różowy ; }
100 % { szczyt : 0 pikseli ; tło : jasnozielony ; }
}
styl >
< ciało >
< h1 > Uruchamianie JavaScript po CSS Animacja h1 >
< h3 > Kliknij poniższy kwadrat, aby rozpocząć animację h3 >
< identyfikator p = 'Do' > P >
< identyfikator działu = „mójDIV” na kliknięcie = „mojaFunkcja()” > div >
< scenariusz >
konst dz.1 = dokument. pobierzElementById ( „mójDIV” ) ;
konst Do = dokument. pobierzElementById ( 'Do' ) ;
funkcja myFunction ( ) {
dz.1. styl . animacja = „moveBox 6s” ;
}
dz.1. dodajEventListener ( „rozpoczęcie animacji” , uruchomFunkcję ) ;
dz.1. dodajEventListener ( „animowanie” , funkcja końcowa ) ;
funkcja startFunkcja ( ) {
Do. wewnętrznyHTML = „Rozpoczęła się animacja…” ;
}
funkcja koniecFunkcja ( ) {
Do. wewnętrznyHTML = „Animacja się zakończyła!” ;
Do. styl . kolor = 'czerwony' ;
}
scenariusz >
ciało >
HTML >
Wyjaśnienie powyższego kodu jest następujące:
- W '
” tagi, element o identyfikatorze „ mójDIV ” ma właściwości CSS. - Następnie „ klatka kluczowa ' o imieniu ' MoveBox ” jest tworzony w celach animacyjnych. Ma trzy stany przejściowe. Pierwsze przejście nastąpi z „ 0% ' Do ' pięćdziesiąt% ”. Następnie następne przejście nastąpi z „ pięćdziesiąt% ' Do ' 100% ”.
- Następnie, wewnątrz znaczników treści, „ h1 ” i „ h3 powstają elementy.
- A ' ”element o identyfikatorze” Do ' jest tworzone.
- A ' div ” element o identyfikatorze „ mójDIV ' jest tworzone. Ponadto funkcja o nazwie „ mojaFunkcja() ” jest dostarczany do „ na kliknięcie ” atrybut elementu div.
- Następnie wewnątrz „
” tworzone są dwie stałe. Te stałe wskazują na elementy HTML za pomocą „ .getElementByID() ' metoda. - Funkcja o nazwie „ mojaFunkcja() ' jest tworzone. Ta funkcja będzie animować „ mójDIV ” element za pomocą „ MoveBox „klatki kluczowe.
- Następnie tworzone są dwa detektory zdarzeń, które wywołują określone funkcje na „ początek animacji „wydarzenie” i „ animowanie ' wydarzenie.
- Następnie definiuje się dwie funkcje dla powyższych zdarzeń.
Wyjście:
Można to zobaczyć na poniższym wyjściu, gdy użytkownik kliknie pole, rozpoczyna się animacja. W procesie animacji ramka zmienia się, przesuwa o 200px w dół i wraca na swoje pierwotne miejsce. Podczas ruchu jego kolor również zmienia się z zielonego na różowy, a następnie ponownie na zielony. Następnie komunikat „ Animacja dobiegła końca! ” jest wyświetlany przy użyciu funkcji JavaScript, która jest wykonywana po zakończeniu animacji CSS.
Chodzi o uruchomienie funkcji JavaScript po zakończeniu animacji CSS.
Wniosek
Aby uruchomić funkcję JavaScript po zakończeniu animacji CSS, użytkownik może skorzystać z detektora zdarzeń. W tym celu użytkownik musi podać „ animowanie ” jako pierwszy argument i funkcja jako drugi argument detektora zdarzeń. Podana funkcja zostanie wykonana po zakończeniu animacji. W tym artykule opisano procedurę uruchamiania funkcji JavaScript po animacji CSS.