transition with vue-router

parent가 변경이 될 때에는 leave가 잘 동작 하지만 children에서 변경이 일어날 때에는 enter 클래스만 적용된다.

HTML

<script src="https://unpkg.com/[email protected]"></script>

<div id="app">
  <router-link to="/" exact>Home</router-link>
  <router-link to="/product/list">ProductList</router-link>
  <router-link to="/product/post">ProductPost</router-link>
  <hr>
  <br>
  <transition name="page" mode="out-in">
    <router-view id="route"></router-view>
  </transition>
</div>

CSS

.page-enter-active, .page-leave-active {
  transition: all .35s;
}

.page-enter {
  transform: translateX(-20px);
  opacity: 0;
}

.page-leave-to {
  transform: translateX(20px);
  opacity: 0;
}

#app{
  width:500px;
  height:500px;
}

#route{
  text-align: center;
}

JavaScript

Vue.use(VueRouter)

const Home = {template: '<div>Home</div>'}
const EmptyParent = {template: '<router-view></router-view>'}

const ProductList = {template: '<div>ProductList</div>'}
const ProductPost = {template: '<div>ProductPost</div>'}

const router = new VueRouter({
	routes: [
  	{
    	path: '/',
      component: Home
    },
    {
    	path: '/product',
      component: EmptyParent,
      children: [
      	{
        	path: 'list',
          component: ProductList
        },
        {
        	path: 'post',
          component: ProductPost
        }
      ]
    }
  ]
})

new Vue({
	el: '#app',
  router,
  data() {
  	return {
    	msg: 'Hi'
    }
  }
})