DOM에 애니메이션 주기

동적 UI 만드는 기본 원리

1. HTML, CSS로 미리 UI디자인 후 평소 숨겨 놓는다
2. 사용자가 조작할 경우(버튼 누르거나 등…) 숨겨 둔 UI 보여달라고 코드를 짠다.

💡 요소에 애니메이션 주는 법 (A > B 일방향)

1. CSS 파일 내에 시작스타일 class 만든다.

(index.css)

.alert-box {
  width: 90%;
  left: 5%;
  bottom: -5%;
  visibility: hidden;
  opacity: 0;
 }

2. CSS 파일 내에 최종스타일 class 만든다.

(index.css)

.show-alert-box {
  visibility: visible;
  opacity: 1;
  bottom: 10%;
}

3. 애니메이션 동작해야할 때(특정 이벤트 발생, 시간 경과 등) 최종스타일로 변하라고 JS 코드 작성한다 (addClass)

 function AnimateAlert() {
      $('#alert-done').addClass('show-alert-box');

      setTimeout(() => {
        location.href = '/';
      }, 1200);
    }

$('클릭요소').click(AnimateAlert())

4. 시작스타일에 transition 추가한다

(index.css)

.alert-box {
  width: 90%;
(중략)
  
transition: all 0.4s;
/* 트랜지션 : 모든 CSS요소가 0.4초에 걸쳐 변하게 한다. (CSS코드에 적어두면 처리됨) */
 }

---

애니메이션 코드 작성 시 팁

💡 애니메이션 줄 땐 display보단 visibility 사용하자
display : none을 대신 visibility : hidden 사용하는 게 좋음
(none은 아예 없어지게, hidden은 안보이게만)

💡 슬라이드 업하면서 요소 사라지게하는 법
요소의 height를 0px 에서 X00px로 지정
이때 CSS에 overflow : hidden 추가해줘야 함 (넘치는 것 안 보이게 처리)

  💡 JS 명령어로 애니메이션 주는 것 삼가하자
JS에서 명령어로 애니메이션 줄 수 있으나 성능 저하될 수 있음.
CSS로 html요소의 시작 상태/종료 상태 지정 후, 애니메이션 적용할 것만 JS로 클래스 탈부착해주는 편이 좋다.
예) 셀렉터명.fadeUp 등...