2017-03-08
bootstrap의 modal창이 열리고 닫힐때 애니메이션이 적용되도록 해보겠다.

우선 적용되는 애니메이션은 아래 링크의 효과들을 이용할 예정이다.
링크: https://daneden.github.io/animate.css/
<link rel="stylesheet" href="/post_inc/bootstrap/animate.min.css">
<button id="modal_open" class="btn btn-default">Modal창 열기</button>

<div class="modal" id="test_modal1">
  <div class="modal-dialog">
	<div class="modal-content">
	  <div class="modal-header">
		<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
		<h4 class="modal-title">제목</h4>
	  </div>
	  <div class="modal-body">
		<p>내용</p>
	  </div>
	  <div class="modal-footer">
		<button type="button" class="btn btn-default" data-dismiss="modal">닫기</button>
		<button type="button" class="btn btn-primary">저장</button>
	  </div>
	</div>
  </div>
</div>

<script>
$(function(){
	var animates = {
		1:['animated zoomIn', 'animated zoomOut']
		,2:['animated flipInX', 'animated flipOutX']
		,3:['animated rotateIn', 'animated rotateOut']
		,4:['animated bounceIn', 'animated bounceOut']
		,5:['animated lightSpeedIn', 'animated lightSpeedOut']
		,6:['animated slideInDown', 'animated slideOutUp']
	};

	var select_num = 1;
	$('#modal_open').click(function(){
		select_num = Math.floor((Math.random() * 6)+ 1 );

		$.each(animates, function(key, val){
			$('.modal-content').removeClass(val[0]);
		})		

		$('#test_modal1').modal();
		$('.modal-content').addClass(animates[select_num][0]); 
		return false;
	});

	var hideDelay = true;
	$('#test_modal1').on('hide.bs.modal',function(e){
		if(hideDelay){
			$('.modal-content').removeClass(animates[select_num][0]).addClass(animates[select_num][1]);
			hideDelay = false;
			setTimeout(function(){
				$('#test_modal1').modal('hide');
				$('.modal-content').removeClass(animates[select_num][1]).addClass(animates[select_num][0]);
			},500);
			return false;
		}
		hideDelay = true;
		return true;
	});
});
</script>
랜덤한 효과를 바탕으로 여러가지 애니메이션이 적용되도록 해놓았다.