Stack Overflow 39939256

Vue.js 2.0 transition vue-router

by Atinux

HTML

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<div id="app"></div>

CSS

.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s
}
.fade-enter, .fade-leave-active {
  opacity: 0
}
.bounce-enter-active {
  animation: bounce-in .5s;
}
.bounce-leave-active {
  animation: bounce-out .5s;
}
@keyframes bounce-in {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes bounce-out {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(0.8);
  }
}

Babel + JSX

const Index = {
  template: `<div id="app">
    <router-link :to="{ path: '1' }">page 1</router-link> | 
    <router-link :to="{ path: '/2' }">page 2/1</router-link> |
    <router-link :to="{ path: '/2/2' }">page 2/2</router-link>
    <transition name="fade">
    	<router-view></router-view>
    </transition>
  </div>`
};

const Element1 = {
  template: `<div class="element" :key="$route.params.id + '-1'">Element {{ $route.params.id + '-1' }}</div>`
};

const Element2 = {
  template: `<div class="element" :key="$route.params.id + '-1'">Element {{ $route.params.id + '-2' }}</div>`
};

const Page = {
  template: `<div :key="$route.params.id">
      <p>Page {{ $route.params.id }}</p>
      <transition name="bounce" mode="out-in">
      	<router-view></router-view>
      </transition>
   	</div>`
};

const App = Vue.extend(Index);

const router = new VueRouter({
  routes: [{
    path: '/:id',
    component: Page,
    children: [{
    	path: '',
      component: Element1
    }, {
    	path: '2',
      component: Element2
    }]
  }, {
    path: '*',
    redirect: '/1'
  }]
})

const app = new App({ router }).$mount('#app');