Vue.js 애니메이션

UI애니메이션을 원할 때 css와 Vue제공 Transition를 활용할 수 있다.

CSS

애니메이션 전 class디자인 -> 동작 이후 class디자인 -> 애니메이션 동작 후 class를 부착 -> 시작전 class명에 transition속성을 주면 부드럽게 에니메이션 ㅇㅇ

조건부 class명을 부착하고 싶을 때

<div :class="{clasname : true}"> </div>

위처럼 사용한다.
오른쪽이 true일 때만 클래스가 들어간다.
버튼을 누르면 오른쪽을 true나 false로 바꿔가며 사용하면 된다.
클래스가 생길때 애니메이션이 실행되게 css를 짜두고 사용하자

Vue Transition

애니메이션을 주고싶은 UI를 Transition태그로 감싸고, css로 아래처럼 스타일을 준다.

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

그러면 ui등장시 에니메이션이 동작한다.
퇴장시 에니메이션을 줄때는 enter를 leave로 바꾸면된다.