路由 切換動畫 vuex

示例 http://47.94.90.89/dist/#/aaa
一、安裝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)
3 src 目錄下創建一個 vuex 目錄，將 store.js 放到 vuex 目錄下

   import Vue from ‘vue‘
import Vuex from ‘vuex‘
Vue.use(Vuex)
const store = new Vuex.Store({
  // 定義狀態
  state: {
    animateName:‘slide-left‘
  },
  mutations:{
    newAnimateName(state,val){
      state.animateName=val
    }
  }
})
export default store
 

三、 配置

1 、 router目錄> index.js
   import  ac2 from ‘@/components/aaachild2‘

Router.prototype.go = function (a) {
  sessionStorage.isBack = true
  if(a){
    window.history.go(a)
  }else{
    window.history.go(-1)
  }
}
window.addEventListener("popstate", function(e) { //×××返回鍵
  sessionStorage.isBack = true
}, false);

Vue.use(Router)
 

2、 app.vue 中

   <template>
  <div id="app">
    <!--<img src="./assets/logo.png">-->

     <transition :name="transitionName" >
        <router-view class="child-view" ></router-view>
      </transition>
  </div>
</template>

<script>
export default {
  name: ‘App‘,
  data () {
    return {

    }
  },
  computed: {
    transitionName () { //實時獲取vuex 改變的類名
      return this.$store.state.animateName
    }
  },
  watch: {
    ‘$route‘ (to, from) {
     // 如果isBack為true時，證明是用戶點擊了回退，執行slide-right動畫
      let isBack = eval(sessionStorage.isBack)
      if (isBack) {
        this.$store.commit(‘newAnimateName‘, ‘slide-right‘)
      } else {
        this.$store.commit(‘newAnimateName‘, ‘ slide-left‘)
      }
      // 做完回退動畫後，要設置成前進動畫，否則下次打開頁面動畫將還是回退
      sessionStorage.isBack = false
    }
  },

}
</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: absolute;
    width: 100%;

  }
  .slide-left-enter,.slide-right-leave-active {
    opacity:0;

    -webkit-transform:translate(100%,0);

    transform:translate(100%,0);

  }

  .slide-left-leave-active,.slide-right-enter {

    opacity:0;

    -webkit-transform:translate(-100%,0);

    transform:translate(-100%,0);
  }
/*  .slide-left-enter-active {
     transition-delay: 0.1s;
   }*/

</style>

子組件嵌套使用 時，入a.vue 中嵌套
<transition :name="transitionName" >
<router-view class="child-view" ></router-view>
同時a中使用計算屬性
computed: {
transitionName () {
return this.$store.state.animateName
}
},

    可以在vuex中使用多個 類名及動畫 給不同的組件使用（猜的）

vuex實現路由切換動畫同時嵌套路由同樣使用