[JavaScript] one-way 애니메이션 만들기

a 상태에서 b 상태를 만드는 일방향 애니메이션

 

ex. alert창 띄울 때 점점 진해지게,

팝업이 위에서 아래로 올라오게 등등 일방향 애니메이션 만드는 방법!

 

1. 시작스타일 만든다.

스타일 옵션은 class로 주고, css 내에서 적용 가능하면 css 안에 추가하도록 한다.

 

display : none을 주면 애니메이션이 잘 동작하지 않아서 

슷한 역할을 할 수 있는 visibility : hidden 을 사용하기로 함.

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

2. 최종스타일 만든다.

=> 최종적으로 보여주고 싶은 스타일, 이것도 class로 스타일을 준다.

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

3. 스크립트로 이벤트 주기

ex) 버튼 클릭할 때 -> onclick.. 등! 

 

4. 시작스타일에 transition 추가 

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

 

생각보다 매우 간단하다

근데 난 css를 못해서... 이것도 넘 신기함 ㅎ0ㅎ

 

재밌구나!