JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdn.bootcss.com/vue-router/0.7.13/vue-router.min.js"></script>
<div id="app">
  <!-- 1. 所有视图统一切换效果示例 -->
 <router-view transition="outLeftInRight"></router-view>
  
  <!-- 2. 各个视图使用各自的切换效果 -->
 <!--  <router-view></router-view> -->
</div>

CSS

body {
  margin: 0;
}
a {
  text-decoration: none;
}

.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 56px;
  box-sizing: border-box;
  padding: 8px 4em;
  line-height: 40px;
  text-align: center;
  color: #fff;
  background: #03A9F4;
}
.header .link {
  position: absolute;
  top: 8px;
  color: #fff;
} 
.header .right {
  right: 10px;
}
.header .left {
  left: 10px;
}

.outLeftInRight-transition,
.fadeOutLeft-transition, 
.fadeInLeft-transition {
  transition: transform .3s ease-in-out;
}
/* 进入时的状态，从右开始 */
.outLeftInRight-enter,
.fadeInLeft-enter,
.fadeInLeft-leave {
  transform: translateX(100%);
}
/* 离开时的状态，向左移动 */
.outLeftInRight-leave,
.fadeOutLeft-enter,
.fadeOutLeft-leave {
  transform: translateX(-100%);
}

JavaScript

// 示例1模版

var Main = Vue.extend({
    template: '<div class="header">MainView<a v-link="{ path: \'/search\' }" class="right link">搜索</a></div>'
})

var Search = Vue.extend({
    template: '<div class="header"><a v-link="{ path: \'/\' }" class="left link">〈</a>SearchView</div>'
})


// 示例2
/* var Main = Vue.extend({
    template: '<div class="header" transition="fadeOutLeft">MainView<a v-link="{ path: \'/search\' }" class="right link">搜索</a></div>'
})

var Search = Vue.extend({
    template: '<div class="header" transition="fadeInLeft"><a v-link="{ path: \'/\' }" class="left link">〈</a>SearchView</div>'
}) */

var App = Vue.extend({})

var router = new VueRouter()

router.map({
    '/': {
        component: Main
    },
    '/search': {
        component: Search
    }
})

router.start(App, '#app')