需要用到的技術(shù)棧Vue+Vuex
先丟個(gè)圖
過(guò)渡動(dòng)畫(huà).gif
在awesomes上尋找移動(dòng)端框架的時(shí)候意外發(fā)現(xiàn)了vux的頁(yè)面切換效果岖瑰，后面由于其他考慮沒(méi)有選用但是這個(gè)切換效果確實(shí)感覺(jué)很有新意，也就看了下源碼轻抱，這里貼一份備用。
//app.vue
<transition :name="'vux-pop-' + (direction === 'forward' ? 'in' : 'out')">
<keep-alive>
<router-view class="router-view" ></router-view>
</keep-alive>
</transition>
<script>
import { mapState } from 'vuex'
import sideFooter from "./components/Footer.vue"
export default {
name: 'app',
data () {
return {
showFooter : false
}
},
components : {
sideFooter
},
computed:{
...mapState({
direction: state => state.mutations.direction
})
},
}
</script>
<style scoped>
.vux-pop-out-enter-active,
.vux-pop-out-leave-active,
.vux-pop-in-enter-active,
.vux-pop-in-leave-active {
will-change: transform;
transition: all 250ms;
height: 100%;
top: 0;
position: absolute;
backface-visibility: hidden;
perspective: 1000;
}
.vux-pop-out-enter {
opacity: 0;
transform: translate3d(-100%, 0, 0);
}
.vux-pop-out-leave-active {
opacity: 0;
transform: translate3d(100%, 0, 0);
}
.vux-pop-in-enter {
opacity: 0;
transform: translate3d(100%, 0, 0);
}
.vux-pop-in-leave-active {
opacity: 0;
transform: translate3d(-100%, 0, 0);
}
</style>
// main.js
const history = window.sessionStorage;
history.clear()
let historyCount = history.getItem('count') * 1 || 0;
history.setItem('/', 0);
router.beforeEach(function (to, from, next) {
const toIndex = history.getItem(to.path);
const fromIndex = history.getItem(from.path);
if (toIndex) {
if (!fromIndex || parseInt(toIndex, 10) > parseInt(fromIndex, 10) || (toIndex === '0' && fromIndex === '0')) {
store.commit('UPDATE_DIRECTION', {direction: 'forward'})
} else {
store.commit('UPDATE_DIRECTION', {direction: 'reverse'})
}
} else {
++historyCount;
history.setItem('count', historyCount);
to.path !== '/' && history.setItem(to.path, historyCount);
store.commit('UPDATE_DIRECTION', {direction: 'forward'})
}
next()
});
這里還用到了vuex，但是我stroe寫了很多就不提出來(lái)了吏垮，主要就是通過(guò) UPDATE_DIRECTION方法更新每一次的路由方向是前進(jìn)還是后退。
man.js里面主要思想就是給路由增加一個(gè)索引存到sessionStorage里面罐旗，以點(diǎn)擊過(guò)的索引值不變膳汪，新增加的路由，索引增加1九秀，同時(shí)count+1遗嗽，這樣在頁(yè)面切換時(shí)通過(guò)比較索引值的大小，大的向右小的向左鼓蜒，做到左右有規(guī)律的過(guò)渡痹换。
好了至此一個(gè)左右切換的過(guò)渡效果就成了，最近由于一直在開(kāi)發(fā)也沒(méi)怎么更新文章友酱，如果有朋友有好的想法歡迎與我交流晴音。
