Bài viết này sẽ cung cấp quy trình chạy hàm JavaScript sau hoạt ảnh CSS.
Làm cách nào để chạy JavaScript sau khi CSS Animation hoàn tất?
Javascript cung cấp “ hoạt hìnhbắt đầu ” & “ hoạt hình ” các sự kiện cho phép nhà phát triển chạy chức năng Javascript khi hoạt ảnh bắt đầu hoặc kết thúc. Điều này giúp các nhà phát triển thực sự thuận tiện khi thực hiện bất kỳ thao tác nào sau khi hoạt ảnh kết thúc. Cú pháp sử dụng “ hoạt hình ” Sự kiện như sau:
{ HTML yếu tố } . addEventListener ( 'hoạt hình' , Tên chức năng ) ;
Trong cú pháp được cung cấp ở trên, “ hoạt hình ” được cung cấp làm đối số đầu tiên cho trình xử lý sự kiện, theo sau là hàm sẽ được thực thi sau khi hoạt ảnh kết thúc. MỘT ' người nghe sự kiện ” trong Javascript sẽ kích hoạt chức năng được cung cấp cho nó bất cứ khi nào một sự kiện cụ thể xảy ra.
Hãy hiểu cách người dùng có thể chạy hàm JavaScript sau hoạt ảnh CSS bằng cú pháp được xác định ở trên. Trong phần minh họa này, một hộp được làm động để di chuyển xuống và xuất hiện trở lại trong “ bốn giây. Sau khi hoạt ảnh hoàn tất, một thông báo sẽ được hiển thị bằng hàm JavaScript.
< html >
< phong cách >
#myDIV {
chiều rộng : 150px ;
chiều cao : 150px ;
chức vụ : liên quan đến ;
lý lịch : màu xanh lợt ;
}
@keyframes moveBox {
0 % { đứng đầu : 0px ; }
năm mươi % { đứng đầu : 200px ; lý lịch : hồng ; }
100 % { đứng đầu : 0px ; lý lịch : màu xanh lợt ; }
}
phong cách >
< thân hình >
< h1 > Chạy JavaScript sau CSS Hoạt hình h1 >
< h3 > Nhấp vào ô vuông bên dưới để bắt đầu hoạt ảnh h3 >
< mã id = 'vì' > P >
< id id = 'myDIV' trong một cái nhấp chuột = 'Chức năng của tôi()' > div >
< kịch bản >
hằng số div1 = tài liệu. getElementById ( 'myDIV' ) ;
hằng số vì = tài liệu. getElementById ( 'vì' ) ;
chức năng myFunction ( ) {
div1. phong cách . hoạt hình = 'moveBox 6s' ;
}
div1. addEventListener ( 'hoạt hình bắt đầu' , chức năng bắt đầu ) ;
div1. addEventListener ( 'hoạt hình' , endHàm ) ;
chức năng bắt đầuChức năng ( ) {
vì. bên trongHTML = 'Phim hoạt hình đã bắt đầu...' ;
}
chức năng cuốiChức năng ( ) {
vì. bên trongHTML = 'Phim hoạt hình đã kết thúc!' ;
vì. phong cách . màu sắc = 'màu đỏ' ;
}
kịch bản >
thân hình >
html >
Giải thích đoạn code trên như sau:
- Bên trong '
” thẻ, phần tử có id “ myDIV ” được cung cấp các thuộc tính CSS. - Tiếp theo, một “ khung hình chính ” có tên “ hộp di chuyển ” được tạo ra cho mục đích hoạt hình. Nó có ba trạng thái chuyển tiếp. Quá trình chuyển đổi đầu tiên sẽ là từ “ 0% ' ĐẾN ' năm mươi% ”. Sau đó, quá trình chuyển đổi tiếp theo sẽ là từ “ năm mươi% ' ĐẾN ' 100% ”.
- Sau đó, bên trong thẻ body, “ h1 ” & “ h3 ” các phần tử được tạo ra.
- MỘT ' ” phần tử có id “ vì ' được tạo ra.
- MỘT ' div ” phần tử có id “ myDIV ' được tạo ra. Ngoài ra, một chức năng có tên là “ myFunction() ” được cung cấp cho “ trong một cái nhấp chuột ” thuộc tính của phần tử div.
- Tiếp theo, bên trong “
” thẻ, hai hằng số được tạo. Các hằng số này hướng tới các phần tử HTML bằng cách sử dụng “ .getElementByID() ' phương pháp. - Một hàm có tên là “ myFunction() ' được tạo ra. Chức năng này sẽ tạo hiệu ứng động cho “ myDIV ” phần tử sử dụng “ hộp di chuyển ” khung hình chính.
- Tiếp theo, hai trình xử lý sự kiện được tạo để gọi các hàm được chỉ định trên “ hoạt hìnhbắt đầu ” sự kiện và “ hoạt hình ' sự kiện.
- Sau đó, hai hàm cho các sự kiện nêu trên được xác định.
Đầu ra:
Có thể thấy ở đầu ra bên dưới khi người dùng nhấp vào hộp, hoạt ảnh bắt đầu. Trong quá trình hoạt ảnh, hộp thay đổi, di chuyển xuống 200px và quay lại vị trí ban đầu. Trong quá trình di chuyển, màu sắc của nó cũng chuyển từ xanh sang hồng rồi lại xanh lục. Tiếp theo là tin nhắn “ Hoạt hình đã kết thúc! ” được hiển thị bằng hàm Javascript được thực thi sau khi hoạt ảnh CSS kết thúc.
Đó là tất cả về việc chạy một hàm JavaScript sau khi hoàn thành hoạt ảnh CSS.
Phần kết luận
Để chạy hàm JavaScript sau khi hoạt ảnh CSS kết thúc, người dùng có thể sử dụng trình xử lý sự kiện. Để làm được điều đó, người dùng phải cung cấp “ hoạt hình ” sự kiện làm đối số đầu tiên và một hàm làm đối số thứ hai cho trình xử lý sự kiện. Chức năng được chỉ định sẽ được thực thi sau khi hoạt ảnh kết thúc. Bài viết này đã cung cấp quy trình chạy hàm Javascript sau hoạt ảnh CSS.