Тази статия ще предостави процедурата за изпълнение на 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 id = 'myDIV' onclick = 'myFunction()' > див >
< сценарий >
конст div1 = документ. getElementById ( 'myDIV' ) ;
конст за = документ. getElementById ( 'за' ) ;
функция myFunction ( ) {
div1. стил . анимация = 'moveBox 6s' ;
}
div1. addEventListener ( 'анимациястарт' , startFunction ) ;
div1. addEventListener ( 'оживяване' , endFunction ) ;
функция startFunction ( ) {
за. innerHTML = 'Анимацията започна...' ;
}
функция endFunction ( ) {
за. innerHTML = „Анимацията свърши!“ ;
за. стил . цвят = 'червен' ;
}
сценарий >
тяло >
html >
Обяснението на горния код е както следва:
- в „ <стил> ” тагове, елементът с id “ myDIV ” се предоставя с CSS свойства.
- След това „ ключов кадър ' на име ' moveBox ” е създаден за анимационни цели. Има три преходни състояния. Първият преход ще бъде от „ 0% ' да се ' петдесет% ”. Тогава следващият преход ще бъде от „ петдесет% ' да се ' 100% ”.
- След това, вътре в етикетите на тялото, „ h1 ” & “ h3 ” се създават елементи.
- A “ ' елемент с идентификатор ' за ' е създаден.
- A “ див ' елемент с id ' myDIV ' е създаден. Освен това функция с име „ myFunction() “ се предоставя на „ onclick ” на елемента div.
- След това вътре в „ <скрипт> ” се създават две константи. Тези константи сочат към HTML елементите, използвайки „ .getElementByID() ” метод.
- Функция с име „ myFunction() ' е създаден. Тази функция ще анимира „ myDIV ' елемент с помощта на ' moveBox ” ключови кадри.
- След това се създават два слушателя на събития, които извикват посочените функции на „ начало на анимацията ” събитие и „ анимиране ” събитие.
- След това се дефинират две функции за гореспоменатите събития.
Изход:
Може да се види в изхода по-долу, когато потребителят щракне върху полето, анимацията започва. В процеса на анимация кутията се променя, премества се с 200px надолу и се връща на първоначалното си място. По време на движение цветът му също се променя от зелен в розов и след това отново в зелен. След това съобщението „ Анимацията свърши! ” се показва с помощта на функция на Javascript, която се изпълнява след завършване на CSS анимацията.
Това е всичко за стартиране на JavaScript функция след завършване на CSS анимацията.
Заключение
За да изпълни функция на JavaScript след завършване на CSS анимация, потребителят може да използва слушател на събития. За целта потребителят трябва да предостави „ анимиране ” събитие като първи аргумент и функция като втори аргумент на слушателя на събития. Посочената функция ще бъде изпълнена след като анимацията приключи. Тази статия предоставя процедурата за изпълнение на Javascript функция след CSS анимация.