Vue transition 动画

router/index.js####

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Test from '@/components/test'
import Test2 from '@/components/test2'

//重写go方法
Router.prototype.go = function(n){
  this.isBack = true;
  window.history.go(n);
}

Vue.use(Router)

export default new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/Test',
      name: 'Test',
      component: Test
    },
    {
      path: '/Test2',
      name: 'Test2',
      component: Test2
    }
  ]
})

App.vue####

<template>
  <div id="app">
    <img src="./assets/logo.png">
      <transition :name="transitionName">
        <router-view class="router"/>
      </transition>
  </div>
</template>

<script>
export default {
  name: 'App',
  data(){
    return{
      transitionName: 'slide-left'
    }
  },
  watch:{
    '$route': function(){
      if(this.$router.isBack){
        this.transitionName = "slide-right";
        this.$router.isBack = false;
      } else {
        this.transitionName = "slide-left"
      }
    }
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
  position: relative;
}
.router{
  position: absolute;
  left: 46%;
  transition: all cubic-bezier(.55,0,.1,1) .5s;
}
.slide-left-enter, .slide-right-leave-active{
  opacity: 0;
  -webkit-transform: translate(50px, 0);
  transform: translate(50px, 0);
}
.slide-left-leave-active, .slide-right-enter{
  opacity: 0;
  -webkit-transform: translate(-50px, 0);
  transform: translate(-50px, 0);
}
</style>