Vue Transition 적용하기

 

Vue에서 router로 페이지 이동 시 띡띡 바뀌는게 아니라 스무스 하게 변경되는 효과를 적용시켜주는 기능이다.

 

 

router로 페이지 이동시 페이지 이동효과를 줄 수 있음.(부드러운 이동 느낌)

app.vue와 defaultLayout 2개에 적용시킴.

각각 페이지 이동과 body영역을 재 랜더링 했을때 부드럽게 이동되는 느낌이 나도록 함.

name에 명시된 이름과 아래 class명이 맞아야함.

<template>
  <Transition name="fade">
    <router-view/>
  </Transition>
</template>

<style>
/*  Router Transition */
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s ease;
}
.fade-enter-from, .fade-leave-to {
  opacity: 0;
}
</style>

사용예시 및 출처주소

Transition | Vue.js

• 추가 수정사항

기존에는 router-view를 transition이 감싸게 했었는데 warning이 console에 찍혔다. 트랜지션 안에 명시하지 말라는 거였다.

<router-view> can no longer be used directly inside <transition> ....

다음과 같이 변경했다.

before

<Transition name="fade">
    <router-view></router-view>
</Transition>

after

<router-view v-slot="{ Component }">
      <Transition name="fade">
          <component :is="Component"></component>
      </Transition>
  </router-view>