모달창만들기와 애니메이션 만들기

버튼 누를때 display : block 으로 버튼만들기 가능

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

.show-modal {
  display : block;
}

 

하지만 나중을 위해 class 부착식으로 만들면 show-modal을 원할때 부착하면 모달창이 보임

 

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

 

버튼을 누르면 .black-bg에 show-modal 클래스명 추가하는 코드임

자바스크립트만 쓰면 document.querySelector('.black-bg').classList.add('show-modal')

  // 닫기 버튼 클릭 시 모달창 닫기
  $("#close").on("click", function () {
    $(".black-bg").removeClass("show-modal");
  });
</script>

 

UI 애니메이션 만드는 방법

1. 시작스타일 class로 만들고

2. 최종스타일 class로 만들고

3. 최종스타일로 변하라고 JS코드를짠다.

4. 시작스타일에 transition 추가

 

.black-bg {
  (생략)
  visibility : hidden;
  opacity : 0;
}
.show-modal {
  visibility : visible;
  opacity : 1;
}

 

display : none을 주면 에니메이션이 잘 동작하지 않아서 비슷한 역할을 할 수 있는

visibility : hidden 을 사용

opacity는 투명도 조절할 수 있는 속성

0 투명 / 1 불투명 

.black-bg {
  (생략)
  visibility : hidden;
  opacity : 0;
  transition : all 1s;
}
.show-modal {
  visibility : visible;
  opacity : 1;
}

 

transition은 스타일 변할 때 천천히 변경

class 탈부착시 opacity가 변하는데 천천히 1초에 걸쳐 변경

 

느낀점

이번 공부를 하면서

<button id="login">로그인</button>

<script>
	$('#login').on('click', function(){
    	$('.black-bg').addClass('show-modal);
        });
</script>

 

이 부분에서 로그인 버튼을 클릭하였을때 class 부착이 되지않아 모달창이 뜨지않아 오랜시간 고민을 하였다.

아직 해결하지 못해서 처음부터 다시 해보려고한다.