您好,登錄后才能下訂單哦!
這篇文章給大家分享的是有關(guān)Vue.js怎么實(shí)現(xiàn)微信過渡動(dòng)畫左右切換效果的內(nèi)容。小編覺得挺實(shí)用的,因此分享給大家做個(gè)參考,一起跟隨小編過來(lái)看看吧。
Vue是一款友好的、多用途且高性能的JavaScript框架,使用vue可以創(chuàng)建可維護(hù)性和可測(cè)試性更強(qiáng)的代碼庫(kù),Vue允許可以將一個(gè)網(wǎng)頁(yè)分割成可復(fù)用的組件,每個(gè)組件都包含屬于自己的HTML、CSS、JavaScript,以用來(lái)渲染網(wǎng)頁(yè)中相應(yīng)的地方,所以越來(lái)越多的前端開發(fā)者使用vue。
需要用到的技術(shù)棧:Vue+Vuex
先看看效果圖
過渡動(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)了,主要就是通過 UPDATE_DIRECTION方法更新每一次的路由方向是前進(jìn)還是后退。
man.js里面主要思想就是給路由增加一個(gè)索引存到sessionStorage里面,以點(diǎn)擊過的索引值不變,新增加的路由,索引增加1,同時(shí)count+1,這樣在頁(yè)面切換時(shí)通過比較索引值的大小,大的向右小的向左,做到左右有規(guī)律的過渡。
好了至此一個(gè)左右切換的過渡效果就成了,最近由于一直在開發(fā)也沒怎么更新文章,如果有朋友有好的想法歡迎與我交流。
感謝各位的閱讀!關(guān)于“Vue.js怎么實(shí)現(xiàn)微信過渡動(dòng)畫左右切換效果”這篇文章就分享到這里了,希望以上內(nèi)容可以對(duì)大家有一定的幫助,讓大家可以學(xué)到更多知識(shí),如果覺得文章不錯(cuò),可以把它分享出去讓更多的人看到吧!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。