[2016.2.1] jade, scss, jquery 이용 - css3 keyframe을 활용한 버튼 클릭 애니메이션

작동 원리는 클릭 이벤트 발생시 is-active 클래스를 추가/ 제거 하여 

등록된 keyframe에 따라 애니메이션이 작동하는 것입니다.

여기서 약간 색다르게 코딩한 부분을 좀 살펴보도록 하겠습니다.

바로 jquery 코딩 방법 중 queue를 이용한 건데요..

클릭시 등록한 'is-active' 클래스를 애니메이션이 종료한 이후에 제거 하기 위해서 사용하였습니다.

animation 속성 적용시 

.top { animation: cut-top 0.8s ease-out; }

이렇게 0.8초동안 애니메이션이 실행되게 세팅하였으므로

$('button').on('click',function(){
  $(this)
    .addClass("is-active")
    .delay(800)
    .queue(function(){
      $(this).removeClass("is-active").dequeue();
    });
});

이렇게 0.8초 동안 딜레이 적용 후, 클래스를 제거할 수 있도록 queue에 담아놨다가 실행 후 제거 하는 것입니다.

setTimeout을 이용하려면 다음과 같이 하면 되겠네요.

$('button').on('click',function(){
  var $this = $(this);
  $this.addClass("is-active");
    setTimeout(function() {
    $this.removeClass("is-active");
  },800);
});

$(this)르 $this로 다시 할당해준 이유는 setTimeout 콜백함수로 $(this) 사용시 적용 scope가 달라져서 안되기 때문입니다.

setTimeout을 사용하다보니 jQuery chaning method는 깨졌군요. ㅎ 코드가 좀 더 늘었습니다.ㅋㅋ

몇년전부터.. css animation event 후 callback event에 대해서 많은 논의가 되어 왔었는데요..

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

$('button').on('click',function(){
  $(this).addClass("is-active");

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

참고) 

• Detect the End of CSS Animations and Transitions with JavaScript
• Using jQuery to Detect When CSS3 Animations and Transitions End

관련 글

2015/09/23 - [Dev. 웹/Front-end 웹개발을 위한 codepen] - [2015.09.23] 메뉴UI - 아크형태로 팝업하는 아기자기한 메뉴 아이콘

2015/12/16 - [Dev. 웹/Front-end 웹개발을 위한 codepen] - [2015.12.16] Dropdown button :: Pure CSS - 순수 css 로만 구현된 드랍다운 버튼, 구현방법

2015/09/24 - [Dev. 웹/Front-end 웹개발을 위한 codepen] - [2015.09.24] jade, sass, angularJS를 활용한 Up! Down! 게임

2016/01/27 - [IT 밑거름] - [Front-end tools] 프론트엔드 개발 기술/툴 정리

2016/01/26 - [나에게 쓰는 편지..] - 최근 관심있어지는 Front-end 기술들...

간단한 사용 예제 및 Demo

See the Pen Cut Copy Share Delete by Ryan Mulligan (@hexagoncircle) on CodePen.