[JS] 모달창에 애니메이션 주기

(전 모달창 만들기 글 참고)

최종 결과물

1. 처음에 시작할 디자인

2. 최종으로 만들어질 디자인

3. javascript로 처음->최종 가도록 조작하고

4. css에 자연스러운 효과 넣기

 

1. 처음에 시작할 디자인

.black-bg {
    width : 100%;
    height : 100%;
    position : fixed;
    background : rgba(0,0,0,0.5);
    z-index : 5;
    padding: 30px;
    visibility: hidden;
    opacity : 0;
  }
.white-bg {
    background: white;
    border-radius: 5px;
    padding: 30px;
}

저번 글에서 display를 none으로 넣었는데, 이러면 애니메이션이 잘 안먹을 수도 있어서 visibility hidden으로 바꿔야 한다.

(display none은 없애는 느낌, visibility는 가림)

 

2. 최종으로 만들어질 디자인

.show-modal{
	visibility: visible;
    opacity : 1;
}

show-modal이 black-bg 뒤에 붙이면서 visibility를 덮을 예정이다.

 

3. javascript로 처음->최종 가도록 조작하고

<script>

	$(#modalBtn).on('click',function(){
        $(.black-bg).addClass('show-modal');
    });

</script>

 

4. css에 자연스러운 효과 넣기 - transition

.black-bg {
    width : 100%;
    height : 100%;
    position : fixed;
    background : rgba(0,0,0,0.5);
    z-index : 5;
    padding: 30px;
    visibility: hidden;
    opacity : 0;
    transition : all 1s;
  }

1초 동안 모든 속성이 transition 효과를 얻는다.

 

그래서 나머지 css요소들은 다 똑같은데 opacity만 0->1로 바뀌기 때문에 1초 동안에 변화가 보이게 되는 것.