누구나 애니메이션 만드는 공식

애니메이션 만드는 공식

one-way 애니메이션을 만드는 공식을 알아보자.

 

one-way 애니메이션이란?

A→B처럼 한방향으로 흘러가는 애니메이션

 

예를들어 아래와 같은 경우가 있겠다.

• 투명도를 0 → 1 로 만들고싶을 때
• margin left 10px → 300px
• font size가 15px → 30px

---

모든것은 세가지 기본단계의 원리만 알면 된다.

첫번째

1. 시작스타일
2. 최종스타일

을 CSS로 만들어놓는다.

두번째

자스로 내가 원할 때 최종스타일로 변하라고 코드를 짠다

세번째

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

---

예제 1

모달창이 toggle 될 때 transition 주기

 

첫번째 단계 

시작스타일 만들기

.black-bg {
  visibility: hidden;
  opacity: 0;
}

 

최종스타일 만들기

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

주의점: 이 때 visibility가 아닌 display를 적용하면 애니메이션이 먹지않는다. 그냥외우자

 

두번째 단계

자스로 내가 원할 때 최종스타일로 변하라고 코드짜기

      document.querySelector('#login').addEventListener('click', function () {
        document.querySelector('.black-bg').classList.add('show-modal');
      });

      document.querySelector('#close').addEventListener('click', function () {
        document.querySelector('.black-bg').classList.remove('show-modal');
      });

'show-modal'클래스가 add되었다가 remove되었다가.

 

세번째 단계

 

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

.black-bg {
  visibility: hidden;
  opacity: 0;
  transition: all 1s;
}

 

---

완성본

 

---

응용해본다면

 

위에서 아래로 슬라이드처럼 내려오기,

왼쪽에서 오른쪽으로 이동하기,

서브메뉴가 접히는 애니메이션(height, overflow:hidden 적용해야함) 등등을 만들 수 있다.