這篇文章主要介紹VUE如何實(shí)現(xiàn)單頁(yè)面切換動(dòng)畫效果,文中介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們一定要看完!
成都網(wǎng)站建設(shè)、成都網(wǎng)站設(shè)計(jì)的關(guān)注點(diǎn)不是能為您做些什么網(wǎng)站,而是怎么做網(wǎng)站,有沒有做好網(wǎng)站,給創(chuàng)新互聯(lián)公司一個(gè)展示的機(jī)會(huì)來證明自己,這并不會(huì)花費(fèi)您太多時(shí)間,或許會(huì)給您帶來新的靈感和驚喜。面向用戶友好,注重用戶體驗(yàn),一切以用戶為中心。
代碼如下:
// 視圖切換動(dòng)畫邏輯 let history = window.sessionStorage let historyCount = history.getItem('count') * 1 || 0 function routerTransition (to, from) { const toIndex = history.getItem(to.name) const fromIndex = history.getItem(from.name) let direction = 'forward' if (toIndex) { if (toIndex >= fromIndex || !fromIndex) { store.commit('UPDATE_DIRECTION', {direction}) } else { direction = 'reverse' store.commit('UPDATE_DIRECTION', {direction}) } } else { ++historyCount history.setItem('count', historyCount) to.path !== '/' && history.setItem(to.name, historyCount) direction = 'forward' store.commit('UPDATE_DIRECTION', {direction}) } } router.beforeEach(function (to, from, next) { routerTransition(to, from) next() })
<template> <div id="app"> <div v-transfer-dom > <loading :show="isLoading" :transition="''"></loading> </div> <transition :name="viewAnimate"> <router-view v-if="isNetworkOnline"></router-view> <no-network v-if="!isNetworkOnline"></no-network> </transition> </div> </template> <script> import '@/assets/iconfont/iconfont.css' import { Loading, TransferDom } from 'vux' import {mapState} from 'vuex' import noNetwork from '@/page/system/callback/noNetwork.vue' export default { directives: { TransferDom }, computed: { ...mapState({ isLoading: state => state.isLoading, direction: state => state.direction, isNetworkOnline: state => state.isNetworkOnline }) }, // dynamically set transition based on route change watch: { '$route' (to, from) { if (this.direction === 'forward') { this.viewAnimate = 'slide-left' } else { this.viewAnimate = 'slide-right' } } }, data () { return { viewAnimate: 'slide-left' } }, components: { Loading, noNetwork } } </script> <style lang="less"> @import '~vux/src/styles/reset.less'; @import '~vux/src/styles/close.less'; @import '~@/styles/common.less'; body { background-color: #fbf9fe; } @keyframes slideInLeft { from { transform: translate3d(100%, 0, 0); opacity: 1; } to { transform: translate3d(0, 0, 0); opacity: 1; } } @keyframes slideInRight { from { transform: translate3d(-100%, 0, 0); opacity: 1; } to { transform: translate3d(0, 0, 0); opacity: 1; } } @keyframes slideLeftOut { from { transform: translate3d(0, 0, 0); opacity: 0; } to { transform: translate3d(100%, 0, 0); opacity: 0; } } @keyframes slideRightOut { from { transform: translate3d(0, 0, 0); opacity: 0; } to { transform: translate3d(-100%, 0, 0); opacity: 0; } } .slide-left-enter-active { animation: slideInLeft .3s forwards; z-index:5; } .slide-left-leave-active { animation: slideLeftOut .3s forwards; z-index:3; } .slide-right-enter-active { animation: slideInRight .3s forwards; z-index:5; } .slide-right-leave-active { animation: slideRightOut .3s forwards; z-index:3; } </style>
以上是“VUE如何實(shí)現(xiàn)單頁(yè)面切換動(dòng)畫效果”這篇文章的所有內(nèi)容,感謝各位的閱讀!希望分享的內(nèi)容對(duì)大家有幫助,更多相關(guān)知識(shí),歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道!
網(wǎng)站名稱:VUE如何實(shí)現(xiàn)單頁(yè)面切換動(dòng)畫效果
當(dāng)前地址:http://bm7419.com/article0/jjegoo.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供企業(yè)網(wǎng)站制作、App設(shè)計(jì)、全網(wǎng)營(yíng)銷推廣、網(wǎng)站收錄、面包屑導(dǎo)航、
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)