示例 (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沒