Tento článek poskytuje postup pro spuštění funkce JavaScriptu po animaci CSS.
Jak spustit JavaScript po dokončení animace CSS?
Javascript poskytuje „ animace start “ & “ oživující ” události, které umožňují vývojáři spustit funkci Javascriptu, jakmile animace začne nebo skončí. Díky tomu je pro vývojáře opravdu pohodlné provádět jakoukoli operaci po dokončení animace. Syntaxe pro použití „ oživující “ událost je následující:
{ HTML živel } . addEventListener ( 'animující' , Název funkce ) ;
Ve výše uvedené syntaxi je „ oživující ” je poskytován jako první argument posluchači událostí, následovaný funkcí, která bude provedena po skončení animace. ' posluchač události ” v Javascriptu spustí funkci, která je mu přidělena, kdykoli dojde ke konkrétní události.
Pojďme pochopit, jak může uživatel spustit funkci JavaScriptu po animaci CSS pomocí výše definované syntaxe. V této ukázce je krabice animována, aby se pohnula dolů a znovu se objevila v „ čtyři “ sekund. Po dokončení animace se zobrazí zpráva pomocí funkce JavaScript.
< html >
< styl >
#myDIV {
šířka : 150 pixelů ;
výška : 150 pixelů ;
pozice : relativní ;
Pozadí : světle zelená ;
}
@keyframes moveBox {
0 % { horní : 0px ; }
padesáti % { horní : 200 pixelů ; Pozadí : růžový ; }
100 % { horní : 0px ; Pozadí : světle zelená ; }
}
styl >
< tělo >
< h1 > Spuštění JavaScriptu po CSS Animace h1 >
< h3 > Kliknutím na čtverec dole spustíte animaci h3 >
< p id = 'pro' > p >
< div id = 'myDIV' při kliknutí = 'myFunction()' > div >
< skript >
konst div1 = dokument. getElementById ( 'myDIV' ) ;
konst pro = dokument. getElementById ( 'pro' ) ;
funkce myFunction ( ) {
divoký1. styl . animace = 'moveBox 6s' ;
}
divoký1. addEventListener ( 'začátek animace' , startFunction ) ;
divoký1. addEventListener ( 'animující' , endFunction ) ;
funkce startFunction ( ) {
pro. vnitřní HTML = 'animace začala...' ;
}
funkce endFunction ( ) {
pro. vnitřní HTML = 'Animace skončila!' ;
pro. styl . barva = 'Červené' ;
}
skript >
tělo >
html >
Vysvětlení výše uvedeného kódu je následující:
- V '
” tagy, prvek s id “ myDIV ” je opatřen vlastnostmi CSS. - Dále, „ klíčový snímek “ s názvem “ moveBox “ je vytvořen pro účely animace. Má tři přechodné stavy. První přechod bude z „ 0 % “ až “ padesáti% “. Poté bude další přechod z „ padesáti% “ až “ 100% “.
- Pak uvnitř značek těla „ h1 “ & “ h3 “ jsou vytvořeny prvky.
- A ' 'prvek s id' pro ' je vytvořen.
- A ' div 'prvek s id' myDIV ' je vytvořen. Také funkce s názvem „ myFunction() “ je poskytován „ při kliknutí ” atribut prvku div.
- Dále uvnitř „