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