css animation event 후 callback event (무한루프)

요즘엔(2016.2.1) 이렇게 코딩 하더라구요. 코드만 봤을때 이해하기 젤 쉬운 방법이네요. 참고해보세요.

$('button').on('click',function(){
    $(this).addClass("is-active");
    
    $(this).one('webkitTransitionEnd webkitAnimationEnd onaimationend msAnimationEnd animationend', function(e) {
    	$(this).removeClass("is-active");
    });
});

 

 

 

 

------------------------------------------------------------------------------------------------------------------------

css3에서는 transition과 animation을 통해서 애니메이션을 사용할 수 있게 되었다. 그와 함께 이를 제어할 수 있는 javascript 함수도 같이 추가되었다.

transition

먼저는 transition이다. 함께 제공되는 함수는 transitionEnd이다. 이벤트 이름에서 알수 있듯이, transition이 완료된 이후에 발생한다. 실제 사용하기 위해서는 아래와 같이 브라우저별로 분기를 해주어야 한다.
– chrome, safari: webkitTransitionEnd
– opera 10.5: oTransitionEnd
– opera 12: otransitionend
– opera 12.10: transitionend
– standard, firefox, ie10+: transitionEnd

좀 더 쉽게 아래의 함수를 이용하자.

var names = [
	"webkitTransitionEnd", 
	"oTransitionEnd", 
	"otransitionend", 
	"transitionend", 
	"transitionEnd" ];

function transitionEvent(element, callback) {
	for (var i = 0; i < names.length; i++) {
		element.addEventListener(names[i], callback, false);
	}
}

transitionEvent(element, HandlerEvent);

 

animation(keyframe)

다음은 animation(keyframe)이다. 함께 제공되는 함수는 animationstart, animationiteration, animationEnd가 있다. 차례대로 설명하면, animationstart는 애니메이션이 처음 시작할때 발생하며 animationiterationd은 애니메이션이 반복될때 시작시마다 발행하며 animationend는 종료후에 발생한다. transition처럼 실제 사용하기 위해서는 아래와 같이 브라우저별로 분기를 해주어야 한다.

 

• animationstart

 

- webkit: webkitAnimationStart
- opera: oanimationstart
- ie10+: MSAnimationStart
- standard, firefox: animationstart

 

• animationiteration

 

- webkit: webkitAnimationIteration
- opera: oanimationiteration
- ie10+: MSAnimationIteration
- standard, firefox: animationiteration

 

• animationend

 

- webkit: webkitAnimationEnd
- opera: oanimationend
- ie10+: MSAnimationEnd
- standard, firefox: animationend

좀 더 쉽게 아래의 함수를 이용해보자.

var pfx = ["webkit", "MS", "o", ""];
function PrefixedEvent(element, type, callback) {
	for (var i = 0; i < pfx.length; i++) {
		type = i > 1 ? type.toLowerCase() : type;
		element.addEventListener(pfx[i]+type, callback, false);
	}
}

PrefixedEvent(element, "AnimationStart", HandlerEvent);
PrefixedEvent(element, "AnimationIteration", HandlerEvent);
PrefixedEvent(element, "AnimationEnd", HandlerEvent);

 

 

 

출처 : https://androphil.tistory.com/654?category=610258

출처 : http://blim.co.kr/archives/138