자바스크립트>모달창과 간단한 애니메이션

모달창 띄우기 숙제 1. 클래스부터 만들어놓읍시다( 재연이 안됨.)

 

버튼 누를 때 display : block 그냥 대충 줘도 되겠지만 나중을 위해 class 부착식으로 만들어봅시다. 

 

설명하다

 

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

.show-modal {
  display : block;
}

그래서 css 파일열어서

모달창에 붙어있던 기본 class엔 display : none을 추가했고

show-modal 이라는 class를 만들었습니다.

이제 show-modal 원할 때 부착하면 모달창 보일듯요 

 

 

 

 

 

모달창 띄우기 숙제 2. 버튼클릭시 모달창 띄워주세요

 

버튼클릭시 모달창 띄워달라고 컴퓨터에게 명령주면 되는데

"띄워주세요~" 라고 코드짜면 컴퓨터가 알아듣겠습니까.

지능이 없는 친구이기 때문에

show-modal 이라는 class를 부착이나 해달라고 구체적으로 명령주면 됩니다. 

 

 

설명하다

 

<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') 하면 되겠군요. 

닫기버튼과 기능은 알아서 만들어오십시오. 

 

 

 

 

 

 

UI 애니메이션 만드는 법

 

fade 애니메이션은 이렇게 만들어요~

slide 애니메이션은 이렇게 만들어요~ 

이렇게 가르치면 100강도 모자라서 평생 강의듣다가 인생끝나니까 

UI 애니메이션 만드는 법을 알려드리도록 하겠습니다. 

실은 자바스크립트말고 css 잘하면 됩니다. 

 

 

[ one-way 일방향 애니메이션 만드는 법 ]

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

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

3. 원할 때 최종스타일로 변하라고 JS 코드짭니다

4. 시작스타일에 transition 추가 

A 상태에서 B 상태로만 움직이는 one-way 애니메이션은 다 이렇게 만들면 됩니다. 

 

 

 

 

 

그럼 모달창 fade-in 애니메이션을 만들어봅시다. 

 

 

 

 

 

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

 

애니메이션 동작 전 스타일과 동작 후 스타일을 class로 각각 만들어두라는 소리입니다.

설명하다

 

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

기존에 있던 display 어쩌구는 다 버리고 이렇게 코드짰습니다.

- display : none을 주면 애니메이션이 잘 동작하지 않기 때문에

그거랑 비슷한 역할을 할 수 있는 visibility : hidden 을 사용했습니다. 

- opacity는 투명도 조절할 수 있는 속성입니다.

0이면 투명 1이면 불투명 0.5면 반투명임 

 

 

 

 

3. 원할 때 최종스타일로 변하라고 자바스크립트 코드짬

 

이건 아까 했습니다. 

로그인버튼 누르면 알아서 show-modal 부착되고 그럼 최종스타일로 변하는군요 

 

 

 

 

4. 시작스타일에 transition 추가 

 

설명하다

 

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

transition은 스타일이 변할 때 천천히 변경하라는 뜻입니다.

지금 class 탈부착시 opacity가 변하는데 그걸 천천히 1초에 걸쳐 변경해줍니다. 

애니메이션 구현 끝 

 

 

 

 

Q. 그럼 모달창이 위에서 밑으로 내려오는 애니메이션은 어떻게 만들까요?

Q. 서브메뉴가 접혔다 펴지는 애니메이션은 어떻게 만들까요? 

심심하면 집에서 해봅시다. 저거 4-step 따라하면 됩니다.

이건 자바스크립트보다는 css 실력에 달린 것이라 css 잘 모르면 못하는게 당연합니다.

 

 

 

 

예를 들면 서브메뉴 이렇게 접히는건

서브메뉴의 height를 0px 에서 400px 로 조절하면 되는데 

overflow : hidden 이런것도 있으면 될듯 합니다.