vue의 UI애니메이션

vue에서 애니메이션을 주는 방법엔 2가지가 있다.

먼저, css로 start라는 클래스를 미리주고, 거기엔 opacity : 0;과 transition: all 1s;을 주고,

end라는 클래스를 모달창이 열릴 때 마다 부착해서 opacity : 1;로 만들어주면 된다.

위처럼 클래스를 부착할 땐, :class="{ end : true }"이렇게 오브젝트형식으로 넣을 수 있다. 그냥 :class="end"도 가능하지만, 오브젝트형식으로 넣어주면, 조건부로 사용할 수 있다. 즉, { 클래스명 : 조건 }으로 사용하며 조건이 참일 때만 클래스가 붙는다. 그래서

<div class="start" :class="{ end : 모달창열렸니 }" >

이런 식으로 적으면, 버튼을 눌러서 모달창열렸니가 true로 바뀌어 모달창이 열리면 자동으로 end라는 클래스가 부착되어 opacity가 0에서 1로 1초동안 바뀌는 애니메이션이 된다.

 

그런데 vue에서는 <transition>을 이용해서 애니메이션을 쉽게 만들 수 있다.

먼저, 애니메이션을 주고싶은 요소를 <transition>으로 감싸주고, <transition name="작명">으로 이름을 붙여준다.

그리고, style태그에서 .작명-enter-from / .작명-enter-active / .작명-enter-to 이렇게 3가지 클래스명을 작성해주고,

.작명-enter-from { 애니메이션 동작 전 상태 }
.작명-enter-active { 애니메이션 동작 중 상태, 대부분 transition 이런거 }
.작명-enter-to { 애니메이션 동작 후 상태 }

이런 식으로, 각각 적어주면 된다.

예시를 들어보면,

<transition name="fade">
   <Modal @closeModal="모달창열렸니 = false" :원룸들="원룸들" :누른거="누른거" :모달창열렸니="모달창열렸니" />
</transition>

이렇게, Modal태그를 transition으로 감싸주고, fade라고 이름을 붙여주고,

.fade-enter-from {
  opacity: 0;
 }
.fade-enter-active {
  transition: all 1s;
 }
.fade-enter-to { 
  opacity: 1;
 }

이렇게 적어주면 된다.

마지막으로, 퇴장 애니메이션은 enter가 아니라 leave로만 바꿔주면 된다. 이것도 예시를 보면,

.fade-leave-from {
  opacity: 1;
 }
.fade-leave-active {
  transition: all 1s;
 }
.fade-leave-to { 
  opacity: 0;
 }

이런 식이다.