[Vue] 트랜지션
2021.08.14
Vuejs를 이용하여 프로젝트를 진행하다 페이지 전환효과를 구현하기 위해 Vue에서 제공하는 트랜지션을 공부하였다.
트랜지션 CSS클래스에는
v-enter : 요소가 나타나기 시작할 때 적용할 클래스
v-enter-active : 요소가 나타나는 트랜지션이 진행되는 동안 적용할 클래스
v-enter-to : 요소가 나타나는 트랜지션이 완료될 때 적용할 클래스
v-leave : 요소가 사라지기 시작할 때 적용할 클래스
v-leave-active : 요소가 사라지는 트랜지션이 진행되는 동안 적용할 클래스
v-leave-to : 요소가 사라지는 트랜지션이 완료될 때 적용할 클래스
@keyframes를 이용한 사용 사례
<style>
.elastic-enter-active {
animation: elastic-in 0.5s;
}
.elastic-leave-active {
animation: elastic-in 0.5s reverse;
}
@keyframes elastic-in{
0%{transform : scale(0); opacity:0;}
100%{transform: scale(1); opacity:1;}
}
</style>
//App.vue
...
<transition name='elastic'>
<router-view/>
</transition>
//<script>
or
<transition :name=transitionName>
<router-view/>
</transition>
watch:{ //router에 의해 페이지 변경되는 것을 관찰.
$route(to, from) {
this.transitionName = to.meta.page > from.meta.page ? 'next' : 'prev';
},
},
댓글을 작성해보세요.
