60. <vue-news> 프로젝트 | Router 트렌지션

https://kr.vuejs.org/v2/guide/transitions.html

진입/진출 그리고 리스트 트랜지션 — Vue.js

---

<App.vue>

<router-view /> 있는쪽에

<transition> 태그 감싸주고 name과 style 태그 넣어주면 끝

<template>
  <div id="app">

    <tool-bar></tool-bar>

    <transition name="page">
      <router-view />
    </transition>
  </div>
</template>

<script>
import ToolBar from './components/ToolBar.vue';

export default {
  components:{
    ToolBar,
  }
}
</script>

<style>
body{
  padding: 0;
  margin: 0;
}
/* Router 트렌지션 */
.page-enter-active,
.page-leave-active {
  transition: opacity .5s;
}

.page-enter,
.page-leave-to

/* .fade-leave-active below version 2.1.8 */
  {
  opacity: 0;
}
</style>