vuex实现路由左右切换动画同时嵌套路由

示例 (hash/ history) http://47.94.90.89/dist
一、安装vue-cli
1    下载安装node.js  
2    npm install -g cnpm --registry=https://registry.npm.taobao.org 换源
3    cnpm install -g vue-cli  全局安装vue-cli  已安装则不用
4    vue init webpack Vue-Project  初始化vue项目 使用webpack模板，项目名称（自带webpack）
5     cnpm install   初始化 生成node_modules
6    npm run dev        上线打包则   npm run build
二、安装vuex
1 cnpm install vuex --save-dev
2 然后在 main.js 中引入
import Vue from 'vue'
import App from './App'
import Vuex from 'vuex'
import store from './vuex/store'
Vue.use(Vuex)

三、安装完成后 配置过度动画的class
1、app.vue中

     <template>  <div id="app">     <transition :name="transitionName" >        <router-view class="child-view" ></router-view>      </transition>  </div></template><script>export default {  name: 'App',  data () {return {}},  computed: {    transitionName () {      //实时获取vuex中的类名称 并更新 transition的name属性        //  在嵌套路由时 则可以返回另一个名称       return this.$store.state.animateName    }  },}</script><style>  *{    margin: 0 ;    padding: 0;  }  body,html{    width: 100%;    height: 100%;  }#app {  font-family: 'Avenir', Helvetica, Arial, sans-serif;  width: 100%;  height: 100%;  text-align: center;  max-width: 750px;  margin: 0 auto;  overflow-x: hidden;  position: relative;}  .child-view {    transition:all .3s ease;    -webkit-transition:all .3s ease;    position: relative;    width: 100%;  }  /*slide-left用在父级过渡动画 aaa,bbb,ccc等*/  .slide-left-enter,.slide-right-leave-active {    opacity:0;    -webkit-transform:translate(100%,0);    transform:translate(100%,0);            position: absolute;            /*1 使用position: absolute; 可以使过渡连贯 且在动画的类中使用position 不用担心样式问题（应该是）      2 也可以transition 中添加 mode='out-in'    */  }  .slide-left-leave-active,.slide-right-enter {    opacity:0;    -webkit-transform:translate(-100%,0);    transform:translate(-100%,0);                    position: absolute;  }  /*slide-up用在a.vue嵌套组件过渡动画 等*/  .slide-up-enter,.slide-down-leave-active {    opacity:0;    -webkit-transform:translate(0,80%);    transform:translate(0,80%);                            position: absolute;  }  .slide-up-leave-active,.slide-down-enter {    opacity:0;    -webkit-transform:translate(0,-80%);    transform:translate(0,-80%);                            position: absolute;  }</style>

slide-up或slide-right等随便定义 vue会自动补全-enter，-leave等。

四 、配置vuex （vuex目录新建store.js）import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)const store = new Vuex.Store({  // 定义状态  state: {    //父级初始使用动画    animateName:'slide-left',            //嵌套的初始使用动画    animateNameChild:'slide-up',  },  mutations:{    //用于修改vuex的值    newAnimateName(state,val){      state.animateName=val    },    newAnimateNameChild(state,val){      state.animateNameChild=val    }  }})export default store

五、main.js中添加：

import Vue from 'vue'import App from './App'import router from './router'import Vuex from 'vuex'import store from './vuex/store'Vue.use(Vuex)Vue.config.productionTip = false// 一、执行返回动画window.addEventListener("popstate", function(e) {  //popestate 用于监听浏览器url为返回或forward  //isBack值 用于判断用户 是点击（页面链接跳转） 还是（点击浏览器返回键或点击返回按钮）  sessionStorage.isBack = true  //子动画 需放进这里  store.commit('newAnimateNameChild', 'slide-down')}, false);//二、执行前进动画router.beforeEach(function (to,form,next) {  // 如果isBack为true时，证明是用户点击了回退，执行slide-right或者slide-down动画 setTimeout(function () { //加延时使上面的popstate先走  哈希模式 则不需要加延时    let isBack = eval(sessionStorage.isBack)    if (isBack) {      //        store.commit 更新vuex中的状态使用 好处是可追踪值变化      //        更改父级路由使用的动画      store.commit('newAnimateName', 'slide-right')    }else{      store.commit('newAnimateName', 'slide-left')      store.commit('newAnimateNameChild', 'slide-up')    }    // 做完回退动画后，要设置成前进动画，否则下次打开页面动画将还是回退    sessionStorage.isBack = false    next()  },0)})此时已经侦听浏览器，手机返回键 前进后退可以动画，同时自己写的按钮因为一般是执行router.go(-1) ，这样也会触发popstate 所以也可以执行动画。还不知道哪里有bug没