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초로 지정한다.
출처 : Vue.js 완벽 가이드 - 실습과 리팩토링으로 배우는 실전 개념
Author And Source
이 문제에 관하여(router-transition), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@developerjune/router-transition저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)