transition은 속성을 서서히 변화시키는 속성이다.
css에서 transition을 사용하면 부드러운 ux를 제공한다.
이 방법이 Javascript로 구현하는 것 보다 더 빠르다.
transition: property yiming-function duration delay | initial | inherit
vue에서는 transition 컴포넌트를 제공한다.
항목이 DOM에 삽입, 갱신 또는 제거 될 때 트랜지션 효과를 적용 가능하다.
조건부 렌더링 (v-if 사용)
<transition name="원하는-이름"></transition>
name을 지정하면 style 태그 내부에서 다음과 같은 클래스를 사용 가능하고,
그 안에서 원하는 효과를 줄 수 있다.
v-enter: enter의 시작 상태. 엘리먼트가 삽입되기 전에 적용되고 한 프레임 후에 제거됩니다.
v-enter-active: enter에 대한 활성 및 종료 상태. 엘리먼트가 삽입되기 전에 적용됩니다. 트랜지션 / 애니메이션이 완료되면 제거됩니다.
v-enter-to: 2.1.8 이상 버전에서 지원합니다. 진입 상태의 끝에서 실행됩니다. 엘리먼트가 삽입된 후 (동시에 v-enter가 제거됨), 트랜지션/애니메이션이 끝나면 제거되는 하나의 프레임을 추가했습니다.
v-leave: leave를 위한 시작 상태. 진출 트랜지션이 트리거 될 때 적용되고 한 프레임 후에 제거됩니다.
v-leave-active: leave에 대한 활성 및 종료 상태. 진출 트랜지션이 트리거되면 적용되고 트랜지션 / 애니메이션이 완료되면 제거됩니다.
v-leave-to: 2.1.8 이상 버전에서 지원합니다. 진출 상태의 끝에서 실행됩니다. 진출 트랜지션이 트리거되고 (동시에 v-leave가 제거됨), 트랜지션/애니메이션이 끝나면 제거되는 하나의 프레임을 추가했습니다.