이 문서에서는 CSS 애니메이션 후에 JavaScript 기능을 실행하는 절차를 제공합니다.
CSS 애니메이션이 완료된 후 JavaScript를 실행하는 방법은 무엇입니까?
자바스크립트는 “ 애니메이션시작 ” & “ 애니메이션 ” 애니메이션이 시작되거나 끝나면 개발자가 Javascript 기능을 실행할 수 있게 해주는 이벤트입니다. 이는 개발자가 애니메이션이 완료된 후 작업을 수행하는 것을 매우 편리하게 만듭니다. “를 사용하기 위한 구문 애니메이션 ” 이벤트 내용은 다음과 같습니다.
{ HTML 요소 } . addEventListener ( '애니메이션' , 함수 이름 ) ;
위에 제공된 구문에서 ' 애니메이션 ”가 이벤트 리스너의 첫 번째 인수로 제공되고 그 뒤에 애니메이션이 끝나면 실행될 함수가 제공됩니다. “ 이벤트 리스너 ” 자바스크립트에서는 특정 이벤트가 발생할 때마다 주어진 함수를 실행합니다.
위에서 정의한 구문을 사용하여 CSS 애니메이션 후에 사용자가 JavaScript 기능을 실행할 수 있는 방법을 이해해 보겠습니다. 이 데모에서는 상자가 아래로 이동했다가 다시 올라오는 애니메이션으로 만들어졌습니다. 네 ”초. 애니메이션이 완료된 후 JavaScript 기능을 사용하여 메시지가 표시됩니다.
< HTML >
< 스타일 >
#myDIV {
너비 : 150px ;
키 : 150px ;
위치 : 상대적인 ;
배경 : 연한 초록색 ;
}
@keyframes moveBox {
0 % { 맨 위 : 0px ; }
오십 % { 맨 위 : 200px ; 배경 : 분홍색 ; }
100 % { 맨 위 : 0px ; 배경 : 연한 초록색 ; }
}
스타일 >
< 몸 >
< h1 > 이후 JavaScript 실행 CSS 생기 h1 >
< h3 > 애니메이션을 시작하려면 아래 사각형을 클릭하세요. h3 >
< 아이디 = '을 위한' > 피 >
< 사업부 ID = '마이DIV' 클릭하면 = '내 함수()' > div >
< 스크립트 >
const div1 = 문서. getElementById ( '마이DIV' ) ;
const ~을 위한 = 문서. getElementById ( '을 위한' ) ;
함수 myFunction ( ) {
div1. 스타일 . 생기 = '무브박스 6s' ;
}
div1. addEventListener ( '애니메이션 시작' , start함수 ) ;
div1. addEventListener ( '애니메이션' , end함수 ) ;
함수 startFunction ( ) {
을 위한. 내부 HTML = '애니메이션이 시작되었습니다...' ;
}
함수 end함수 ( ) {
을 위한. 내부 HTML = '애니메이션이 끝났습니다!' ;
을 위한. 스타일 . 색상 = '빨간색' ;
}
스크립트 >
몸 >
HTML >
위 코드에 대한 설명은 다음과 같습니다.
- “에서 <스타일> ” 태그, ID가 “인 요소 myDIV ”에는 CSS 속성이 제공됩니다.
- 다음으로 “ 키프레임 ' 명명 된 ' moveBox ”는 애니메이션 목적으로 만들어졌습니다. 세 가지 과도기 상태가 있습니다. 첫 번째 전환은 ' 0% ' 에게 ' 오십% '. 그러면 다음 전환은 ' 오십% ' 에게 ' 100% '.
- 그런 다음 body 태그 내부에 “ h1 ” & “ h3 ” 요소가 생성됩니다.
- ㅏ ' ” ID가 “인 요소 ~을 위한 '가 생성됩니다.
- ㅏ ' div ” ID가 “인 요소 myDIV '가 생성됩니다. 또한 “ 마이함수() '는 '에 제공됩니다. 클릭하면 ” div 요소의 속성입니다.
- 다음으로 ' <스크립트> ” 태그를 사용하면 두 개의 상수가 생성됩니다. 이 상수는 '를 사용하여 HTML 요소를 가리킵니다. .getElementByID() ' 방법.
- '라는 이름의 함수 마이함수() '가 생성됩니다. 이 기능은 ' myDIV '를 사용하는 ' 요소 moveBox ” 키프레임.
- 다음으로, '에서 지정된 함수를 호출하는 두 개의 이벤트 리스너가 생성됩니다. 애니메이션시작 ” 이벤트와 “ 애니메이션 ' 이벤트.
- 그러면 위에서 언급한 이벤트에 대한 두 가지 기능이 정의됩니다.
산출:
아래 출력에서 사용자가 상자를 클릭하면 애니메이션이 시작되는 것을 볼 수 있습니다. 애니메이션 과정에서 상자가 변경되어 200px 아래로 이동한 후 원래 위치로 돌아옵니다. 이동하는 동안 색상도 녹색에서 분홍색으로 바뀌었다가 다시 녹색으로 변합니다. 다음으로 “ 애니메이션이 종료되었습니다! ”는 CSS 애니메이션이 완료된 후 실행되는 Javascript 기능을 사용하여 표시됩니다.
CSS 애니메이션을 마친 후 JavaScript 함수를 실행하는 것이 전부입니다.
결론
CSS 애니메이션이 완료된 후 JavaScript 기능을 실행하려면 사용자는 이벤트 리스너를 사용할 수 있습니다. 이를 위해 사용자는 ' 애니메이션 ” 이벤트를 첫 번째 인수로, 함수를 이벤트 리스너의 두 번째 인수로 사용합니다. 애니메이션이 완료된 후 지정된 기능이 실행됩니다. 이 기사에서는 CSS 애니메이션 후에 Javascript 기능을 실행하는 절차를 제공했습니다.