CSS3의 시대에는 CSS3- 애니메이션이 가능합니다.
전통적인 JS는 애니메이션이 콜백 함수를 통해 종료되는지 여부를 결정할 수 있습니다. CSS 기술이 애니메이션 효과를 생성하는 데 사용 되더라도 JavaScript는 여전히 애니메이션 또는 변환의 결말 이벤트를 캡처 할 수 있습니다.
TransitionEnd Event 및 AnimationEnd 이벤트 표준 브라우저 이벤트이지만 WebKit 브라우저에서는 여전히 WebKit Prefix를 사용해야하므로 다양한 브라우저에 따라 이벤트를 별도로 감지해야합니다.
코드 사본은 다음과 같습니다.
var 전환 = {
'전환': 'TransitionEnd',
'Otransition': 'OtransitionEnd',
'moztransition': 'TransitionEnd',
'WebKitTransition': 'WebKitTransitionEnd'
}
소스 코드는 다음과 같습니다.
코드 사본은 다음과 같습니다.
<! doctype html>
<html>
<헤드>
<meta charset = "utf-8">
<title> Suface JS는 CSS 애니메이션이 종료되는지 </title>을 결정합니다
</head>
<body>
<p> 애니메이션이나 변환이 완료 되 자마자 콜백 함수가 발사됩니다. 대규모 수업 도서관 지원은 더 이상 필요하지 않습니다. <br> </p>
<스타일 유형 = "텍스트/CSS">
.sample {
너비 : 200px;
높이 : 200px;
국경 : 1px 고체 녹색;
배경 : Lightgreen;
불투명도 : 1;
마진 바닥 : 20px;
전환-프로파일 : 불투명도;
/*전환 기간 : .5S;*/
전환 기간 : 3s;
}
.sample.hide {
불투명도 : 0;
}
</스타일>
<div> CSS3 애니메이션은 너무 지나치게 숨겨져 있습니다 (전환 기간 : 3S;) </div>
<p> <button onclick = "this.style.display = 'none'; startfade ();"> 천천히 페이드, 감지 종료 이벤트 </button> </p>
<cript>
(기능() {
var e = document.getElementsByClassName ( 'sample') [0];
기능 whithtransitionevent () {
var t;
var el = document.createelement ( '가짜 요소');
var 전환 = {
'전환': 'TransitionEnd',
'Otransition': 'OtransitionEnd',
'moztransition': 'TransitionEnd',
'WebKitTransition': 'WebKitTransitionEnd'
}
(t in transitions) {
if (el.style [t]! == undefined) {
반환 전환 [t];
}
}
}
var transitionEvent = whatTransitionEvent ();
TransfinitionEvent && e.AdDeventListener (TransitionEvent, function () {
ALERT ( 'CSS3 Movement Ends! 나는 콜백 함수이며 타사 클래스 라이브러리가 사용되지 않습니다!');
});
startfade = function () {
e.classname+= '숨기기';
}
}) (); <br> </script>
</body>
</html>
위는이 기사에서 CSS3 애니메이션의 끝을 판단하기위한 JavaScript에 관한 방법입니다. 나는 모두가 그것을 좋아하기를 바랍니다