애니메이션 다뤄보기

오늘은 버튼을 클릭했을 때 아래의 창이

아래에서 위로 올라오도록 만들어보겠다.

우선 아래의 창을 생성해주었다.

 

useState: 새로고침하지 않아도 값 변경 있을 경우 알아서 값을 가져옴

이제 여기서 오늘 하고자 했던 

애니메이션을 추가해보도록 하겠다.

 

버튼을 클릭했을 경우

창이 뜨게 만드는 fadeIn 변수와 

창이 아래에서 위로 올라오게끔 만들어주는

slideUp 변수를 만들었다.

 

그런 뒤 DarkBackground 변수와

DialogBlock변수 안에 각각 다음의 코드들을 넣어주었다.

 

 

 

 

그런 다음 실행시켜보면 

알림창이 아래에서 위로 올라오면서 

뜨는 모습을 확인할 수 있을 것이다.

 

++++++

2022.04.07

 

오늘은 어제 한 내용에 이어

뜬 창을 아래로 내려가게끔 만들어

없애는 기능을 추가시켜보도록 하겠다.

 

우선 창이 사라지게끔 만들어주는 fadeOut 변수와

창이 아래로 내려가게끔 만들어주는 slideDown 변수를 생성해주었다.

 

그런 다음 애니메이션과 창이 사라지는 동안

기다려주는 코드를 작성해주었다.

 

 

그리고 해당 내용을

창에다가 적용시켜주었다.