[JavaScript] 모달창만들기&간단한 애니메이션

버튼 클릭 시 모달창 띄우고 추가로 애니메이션을 적용해보기

모달창 띄우기

1. class 만들기

버튼 누를 때 display:block을 줘도 되지만 나중을 위해 class 부착식으로 만들어보겠음.

.black-bg {
  (생략)
  display : none;
}

.show-modal {
  display : block;
}

모달창에 붙어있는 기본 class엔 display:none을 주고
show-modal이라는 class를 생성해서 원할때 부착하는 식으로 하겠습니다.

2. 버튼 클릭 시 모달창 띄우기

<button id="login">로그인</button>
<script>
  $('#login').on('click', function(){
    $('.black-bg').addClass('show-modal');
  });
</script>

버튼을 누르면 .black-bg에 .show-modal을 추가하고 명령을 주겠습니다.

+) 닫기 기능

<button id="close">닫기</button>
<script>
  $('#close').on('click', function(){
    $('.black-bg').removeClass('show-modal');
  });
</script>

닫기 버튼을 누르면 .black-bg에 .show-modal을 remove해달라고 하면 될 듯 합니다.

UI애니메이션 만들기

one-way 일방향 애니메이션 만들기

1. 시작스타일(class로) 만들고
2. 최종스타일(class로) 만들고
3. 원할 때 최종스타일로 변하라고 js코드 짜기
4. 시작 스타일에 transition 추가

그럼 모달창에 fade-in 애니메이션을 만들어 보겠습니다.

1. 시작스타일 2. 최종스타일을 class로 만들어보기

.black-bg {
  (생략)
  visibility : hidden;
  opacity : 0;
}
.show-modal {
  visibility : visible;
  opacity : 1; //투명도 조절(0:투명, 1:불투명, 0.5:반투명)
}

display: none을 주면 애니메이션이 잘 동작하지 않기 때문에 그거랑 비슷한 visibility: hidden을 사용했습니다.

3. 최종스타일로 변경하는 자바스크립트 코드

이건 아까 했음
로그인 버튼 클릭 시 .show-modal이 부착되고 최종스타일로 변경됨.

4. 시작스타일에 transition추가

.black-bg {
  (생략)
  visibility : hidden;
  opacity : 0;
  transition : all 1s; // 1초에 걸쳐 천천히 변경
}
.show-modal {
  visibility : visible;
  opacity : 1;
}

transition은 스타일이 변할 때 천천히 변경하라는 뜻
지금 class 탈부착시 opacity가 변하는데 이걸 1초에 걸쳐 변경해줍니다.
(all로 안하고 opacity를 지정해줘도 됨)