[Vue] 에니메이션 쉽게 하는 방법

1. enter-form/active/to

Vue는 프레임워크 답게 에니메이션도 CSS 내에서 한번에 쉽게 적용할 수 있다.
아래 예시를 보자.

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

.fade-enter-from {
 transform: translateY(-1000px)
}
.fade-enter-active {
 transition: all 1s;
}
.fade-enter-to {
 transform: translateY(0px)
}

1. 원하는 TAG 위아래로 transition을 감싸준다.
2. style에 가서 transition의 이름(위에선 fade)뒤에 -enter-from,-enter-active,-enter-to를 붙인 CSS를 만들어준다.
3. 초기 상태, 트랜지션, 최종 상태를 각각 적어준다.

물론, 그냥 CSS로도 할 수 있지만 위의 방법으로 하면 좀 더 간결한 것 같다.

에니메이션 만들 때 쉽게 해보자!