one-way UI 애니메이션

one-way UI 방법

1. 시작스타일

2. 최종스타일

3. 최종스타일 이벤트 코드작성

4. transition 추가

 

즉, 시작 전과 최종 화면단을 미리 구성해두고

트랜지션으로 부드럽게 해주면 애니메이션이 나온다.

 

display: none에서 block이 되면 애니메이션 과정이 생략되서 

display대용으로 visibility: visible, hidden을사용해야 애니메이션이 잘 먹는다.

 

opacity를 써야한다. 그 이유는 투명도가 0에서 1이 되는 과정을 트랜지션으로 걸어두면

서서히 보이는 이펙트를 줄 수 있기때문이다.

 

사용법

 

시작스타일은 다음과 같은 코드를 넣는다.

visibility: hidden;
opacity: 0;
transition: all 1s;

 

최종스타일은 다음과 같은 코드를 넣는다.

visibility: visible;
opacity: 1;

 

주의사항 js로도 구현가능하지만 성능차이때문에 css로 하는 것을 권장한다.

 

 

방법1 CSS

mo.addEventListener("click", function(){
    bg.classList.add("ani");
})

cl.addEventListener("click", function(){
    bg.classList.remove("ani");
})

// 초기값은 시작스타일이고 ani의 클래스값은 최종스타일 값이다.
// js단에서 클래스 추가 삭제만 해주는 코드이다.

 

방법2 JS

 

mo.addEventListener("click", function(){
    bg.style.visibility="visible";
    bg.style.opacity="1";
})

cl.addEventListener("click", function(){
    bg.style.visibility="hidden";
    bg.style.opacity="0";
})

//트랜지션은 css에서 조정해줬고 js단에서 직접 시작, 최종스타일 값을 주었다.