Vue.js實(shí)現(xiàn)微信過(guò)渡動(dòng)畫左右切換效果
前言
在awesomes上尋找移動(dòng)端框架的時(shí)候意外發(fā)現(xiàn)了vux的頁(yè)面切換效果,后面由于其他考慮沒(méi)有選用vuex但是這個(gè)切換效果確實(shí)感覺(jué)很有新意,也就看了下源碼,這里貼一份備用。
需要用到的技術(shù)棧:Vue+Vuex
先看看效果圖
過(guò)渡動(dòng)畫
示例代碼
//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)怎么更新文章,如果有朋友有好的想法歡迎與我交流。
總結(jié)
以上就是這篇文章的全部?jī)?nèi)容了,希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助,如有疑問(wèn)大家可以留言交流,謝謝大家對(duì)腳本之家的支持。
- Vue列表如何實(shí)現(xiàn)滾動(dòng)到指定位置樣式改變效果
- Vue.js 無(wú)限滾動(dòng)列表性能優(yōu)化方案
- vue實(shí)現(xiàn)歌手列表字母排序下拉滾動(dòng)條側(cè)欄排序?qū)崟r(shí)更新
- vue通過(guò)滾動(dòng)行為實(shí)現(xiàn)從列表到詳情,返回列表原位置的方法
- Vue2.0 實(shí)現(xiàn)歌手列表滾動(dòng)及右側(cè)快速入口功能
- Vuejs第七篇之Vuejs過(guò)渡動(dòng)畫案例全面解析
- Vue.js每天必學(xué)之過(guò)渡與動(dòng)畫
- Vue 過(guò)渡實(shí)現(xiàn)輪播圖效果
- 關(guān)于vue狀態(tài)過(guò)渡transition不起作用的原因解決
- vue實(shí)現(xiàn)列表滾動(dòng)的過(guò)渡動(dòng)畫
相關(guān)文章
Vue中的methods、computed計(jì)算屬性和watch監(jiān)聽(tīng)屬性的使用和區(qū)別解析
這篇文章主要介紹了Vue中的methods、computed計(jì)算屬性和watch監(jiān)聽(tīng)屬性的使用和區(qū)別,本文通過(guò)示例代碼給大家介紹的非常詳細(xì)對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2024-01-01vue-router history模式服務(wù)器端配置過(guò)程記錄
vue路由有hash和history兩種模式,這篇文章主要給大家介紹了關(guān)于vue-router history模式服務(wù)器端配置的相關(guān)資料,需要的朋友可以參考下2021-06-06vue如何實(shí)現(xiàn)pc和移動(dòng)端布局詳細(xì)代碼
這篇文章主要給大家介紹了關(guān)于vue如何實(shí)現(xiàn)pc和移動(dòng)端布局的相關(guān)資料, Vue響應(yīng)式布局適配是一種根據(jù)設(shè)備特性自動(dòng)調(diào)整布局的方法,文中通過(guò)代碼以及圖文介紹的非常詳細(xì),需要的朋友可以參考下2023-10-10vue3使用vue-count-to組件的實(shí)現(xiàn)
這篇文章主要介紹了vue3使用vue-count-to組件的實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12vue3.0+vite2實(shí)現(xiàn)動(dòng)態(tài)異步組件懶加載
學(xué)了vue寫項(xiàng)目這么久,忽然發(fā)現(xiàn)路由懶加載的寫法,節(jié)省了加載所有路由的時(shí)間。本文主要介紹了vue3.0+vite2實(shí)現(xiàn)動(dòng)態(tài)異步組件懶加載,感興趣的可以了解一下2021-06-06vue2中基于vue-simple-upload實(shí)現(xiàn)文件分片上傳組件功能
這篇文章主要介紹了vue2中基于vue-simple-upload的文件分片上傳組件,本文通過(guò)示例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-06-06打通前后端構(gòu)建一個(gè)Vue+Express的開(kāi)發(fā)環(huán)境
這篇文章主要介紹了打通前后端構(gòu)建一個(gè)Vue+Express的開(kāi)發(fā)環(huán)境,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-07-07vue3.0+element表格獲取每行數(shù)據(jù)代碼示例
這篇文章主要給大家介紹了關(guān)于vue3.0+element表格獲取每行數(shù)據(jù)的相關(guān)資料,在element-ui中,你可以通過(guò)為表格的行綁定單擊事件來(lái)獲取表格中的一行數(shù)據(jù),需要的朋友可以參考下2023-09-09