router-transition

이전에 todo-app을 만들 때 item 등록 삭제 과정 중 transition을 구현한 적이 있다.

화면 전환간 transition 또한 구현할 수 있는데 이를 router-transition이라고 한다.

transition 상태는 총 6가지로 구분지어진다.

v-enter: enter의 시작상태. 엘리먼트가 삽입되기전에 적용되고 한 프레임 후에 제거된다.
v-enter-active: enter에 대한 활성 및 종료상태 엘리먼트가 삽입되기전에 적용되며 트랜지션/애니메이션이 완료되면 제거됨
v-enter-to: 진입 상태의 끝에서 실행된다.
v-leave: leave의 시작상태
v-leave-active: leave에 대한 활성 및 종료상태
v-leave-to: 진출 상태의 끝에서 실행된다..

//template
<transition name="routing-fade">
  <router-view />
</transition>

//style
.routing-fade-enter-active {
  transition: opacity 1s;
}
.routing-fade-enter, .routing-fade-leave-to {
  opacity: 0;
}

위 예제 코드는 vue.js 공식 사이트에서 퍼온 코드이다.
화면 전환간 fade 효과를 적용한건데 원리는 다음과 같다.

1. 나타날때
routing-fade-enter 상태에서는 투명도를 0으로 지정하고(아무것도 보이지 않음)
active가 진행될때 투명도가 1이 될때까지의 시간을 1초로 지정한다.

2. 사라질때
투명도가 1인 상태에서(opacity: 1) 투명도가 0인 상태까지 도달하는 과정에서
active가 진행될때 투명도가 0이 될때까지의 시간을 1초로 지정한다.

fade효과

출처 : Vue.js 완벽 가이드 - 실습과 리팩토링으로 배우는 실전 개념