В этой статье будет описана процедура запуска функции JavaScript после анимации CSS.
Как запустить JavaScript после завершения CSS-анимации?
Javascript предоставляет « начало анимации » & « анимация ” события, которые позволяют разработчику запускать функцию Javascript после начала или окончания анимации. Благодаря этому разработчикам действительно удобно выполнять любую операцию после завершения анимации. Синтаксис использования « анимация Событие заключается в следующем:
{ HTML элемент } . добавитьEventListener ( 'анимация' , ИмяФункции ) ;
В приведенном выше синтаксисе « анимация » предоставляется в качестве первого аргумента прослушивателя событий, за которым следует функция, которая будет выполнена после завершения анимации. « прослушиватель событий » в Javascript запускает данную ему функцию всякий раз, когда происходит определенное событие.
Давайте разберемся, как пользователь может запустить функцию JavaScript после анимации CSS, используя определенный выше синтаксис. В этой демонстрации ящик анимируется, перемещаясь вниз и снова поднимаясь в « четыре » секунды. После завершения анимации будет отображено сообщение с использованием функции JavaScript.
< HTML >
< стиль >
#myDIV {
ширина : 150 пикселей ;
высота : 150 пикселей ;
позиция : родственник ;
фон : светло-зеленый ;
}
@keyframes moveBox {
0 % { вершина : 0 пикселей ; }
пятьдесят % { вершина : 200 пикселей ; фон : розовый ; }
100 % { вершина : 0 пикселей ; фон : светло-зеленый ; }
}
стиль >
< тело >
< ч1 > Запуск JavaScript после CSS Анимация ч1 >
< h3 > Нажмите на квадрат внизу, чтобы запустить анимацию. h3 >
< идентификатор p '=' 'для' >/ п >
< идентификатор деления '=' 'myDIV' по щелчку '=' 'мояФункция()' >/ div >
< сценарий >
константа дел.1 '=' документ. getElementById ( 'myDIV' ) ;
константа для '=' документ. getElementById ( 'для' ) ;
функция myFunction ( ) {
дел1. стиль . анимация '=' 'мовБокс 6s' ;
}
дел1. добавитьEventListener ( 'начало анимации' , стартфункция ) ;
дел1. добавитьEventListener ( 'анимация' , конечнаяфункция ) ;
функция startFunction ( ) {
для. внутреннийHTML '=' «Анимация началась...» ;
}
функция endFunction ( ) {
для. внутреннийHTML '=' «Анимация закончилась!» ;
для. стиль . цвет '=' 'красный' ;
}
сценарий >
тело >
HTML >
Объяснение приведенного выше кода следующее:
- В ' <стиль> ” теги, элемент с идентификатором “ myDIV » предоставляется свойствами CSS.
- Далее « ключевой кадр 'по имени' moveBox » создан для анимационных целей. Имеет три переходных состояния. Первый переход будет из « 0% ' к ' пятьдесят% ». Затем следующий переход будет от « пятьдесят% ' к ' 100% ».
- Затем внутри тегов body добавляется « ч1 » & « h3 элементы создаются.
- А» <р> ”элемент с идентификатором” для ' создано.
- А» div ” элемент с идентификатором “ myDIV ' создано. Кроме того, функция с именем « мояФункция() » предоставляется « по щелчку Атрибут элемента div.
- Далее внутри « <скрипт> ” создаются две константы. Эти константы указывают на элементы HTML с помощью « .getElementByID() метод.
- Функция с именем « мояФункция() ' создано. Эта функция будет анимировать « myDIV ” с помощью элемента “ moveBox ключевые кадры.
- Далее создаются два прослушивателя событий, которые вызывают указанные функции на « начало анимации ” событие и “ анимация ' событие.
- Затем определяются две функции для вышеупомянутых событий.
Выход:
Это видно на приведенном ниже выводе: когда пользователь нажимает на поле, запускается анимация. В процессе анимации поле меняется, перемещается на 200 пикселей вниз и возвращается на исходное место. Во время движения его цвет также меняется с зеленого на розовый, а затем снова на зеленый. Далее сообщение « Анимация закончилась! » отображается с помощью функции Javascript, которая выполняется после завершения CSS-анимации.
Это все, что касается запуска функции JavaScript после завершения CSS-анимации.
Заключение
Чтобы запустить функцию JavaScript после завершения CSS-анимации, пользователь может использовать прослушиватель событий. Для этого пользователю необходимо предоставить « анимация ” событие в качестве первого аргумента и функция в качестве второго аргумента прослушивателя событий. Указанная функция будет выполнена после завершения анимации. В этой статье представлена процедура запуска функции Javascript после анимации CSS.