vuex實(shí)現(xiàn)路由左右切換動(dòng)畫同時(shí)嵌套路由使用不同動(dòng)畫（兼聽手機(jī)返回鍵或自寫按鈕）

示例 (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項(xiàng)目使用webpack模板，項(xiàng)目名稱（自帶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)

創(chuàng)新互聯(lián)建站從2013年開始，是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項(xiàng)目網(wǎng)站設(shè)計(jì)、成都網(wǎng)站制作網(wǎng)站策劃，項(xiàng)目實(shí)施與項(xiàng)目整合能力。我們以讓每一個(gè)夢(mèng)想脫穎而出為使命，1280元烏什做網(wǎng)站,已為上家服務(wù),為烏什各地企業(yè)和個(gè)人服務(wù),聯(lián)系電話:18982081108

三、安裝完成后配置過度動(dòng)畫的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 () {
      //實(shí)時(shí)獲取vuex中的類名稱 并更新 transition的name屬性
        //  在嵌套路由時(shí) 則可以返回另一個(gè)名稱 
      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用在父級(jí)過渡動(dòng)畫 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; 可以使過渡連貫 且在動(dòng)畫的類中使用position 不用擔(dān)心樣式問題（應(yīng)該是）
      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嵌套組件過渡動(dòng)畫 等*/
  .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會(huì)自動(dòng)補(bǔ)全-enter，-leave等。

四 、配置vuex （vuex目錄新建store.js）
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)
const store = new Vuex.Store({
  // 定義狀態(tài)
  state: {
    //父級(jí)初始使用動(dòng)畫
    animateName:'slide-left',
            //嵌套的初始使用動(dòng)畫
    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

// 一、執(zhí)行返回動(dòng)畫
window.addEventListener("popstate", function(e) {
  //popestate 用于監(jiān)聽瀏覽器url為返回或forward
  //isBack值 用于判斷用戶 是點(diǎn)擊（頁(yè)面鏈接跳轉(zhuǎn)） 還是（點(diǎn)擊瀏覽器返回鍵或點(diǎn)擊返回按鈕）
  sessionStorage.isBack = true
  //子動(dòng)畫 需放進(jìn)這里
  store.commit('newAnimateNameChild', 'slide-down')
}, false);

//二、執(zhí)行前進(jìn)動(dòng)畫
router.beforeEach(function (to,form,next) {
  // 如果isBack為true時(shí)，證明是用戶點(diǎn)擊了回退，執(zhí)行slide-right或者slide-down動(dòng)畫
 setTimeout(function () { //加延時(shí)使上面的popstate先走  哈希模式 則不需要加延時(shí)
    let isBack = eval(sessionStorage.isBack)
    if (isBack) {
      //        store.commit 更新vuex中的狀態(tài)使用 好處是可追蹤值變化
      //        更改父級(jí)路由使用的動(dòng)畫
      store.commit('newAnimateName', 'slide-right')
    }else{
      store.commit('newAnimateName', 'slide-left')
      store.commit('newAnimateNameChild', 'slide-up')
    }
    // 做完回退動(dòng)畫后，要設(shè)置成前進(jìn)動(dòng)畫，否則下次打開頁(yè)面動(dòng)畫將還是回退
    sessionStorage.isBack = false
    next()

  },0)
})

此時(shí)已經(jīng)偵聽瀏覽器，手機(jī)返回鍵 前進(jìn)后退可以動(dòng)畫，同時(shí)自己寫的按鈕因?yàn)橐话闶菆?zhí)行router.go(-1) ，這樣也會(huì)觸發(fā)popstate 所以也可以執(zhí)行動(dòng)畫。

還不知道哪里有bug沒

文章名稱：vuex實(shí)現(xiàn)路由左右切換動(dòng)畫同時(shí)嵌套路由使用不同動(dòng)畫（兼聽手機(jī)返回鍵或自寫按鈕）
鏈接URL：http://www.muchs.cn/article24/ghgece.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站建設(shè)、微信小程序、小程序開發(fā)、軟件開發(fā)、響應(yīng)式網(wǎng)站、網(wǎng)站導(dǎo)航

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容