您好,登錄后才能下訂單哦!
這篇文章將為大家詳細講解有關(guān)vue怎么實現(xiàn)app頁面切換動畫效果,小編覺得挺實用的,因此分享給大家做個參考,希望大家閱讀完這篇文章后可以有所收獲。
Vue是一套用于構(gòu)建用戶界面的漸進式JavaScript框架,Vue與其它大型框架的區(qū)別是,使用Vue可以自底向上逐層應(yīng)用,其核心庫只關(guān)注視圖層,方便與第三方庫和項目整合,且使用Vue可以采用單文件組件和Vue生態(tài)系統(tǒng)支持的庫開發(fā)復(fù)雜的單頁應(yīng)用。
因為需要實現(xiàn)類似APP頁面切換的動畫效果,百度google搜索比較少資料,所以自己寫文檔,希望對您有用
在router/index.js
import Vue from 'vue' import Router from 'vue-router' Vue.use(Router) Router.prototype.goBack = function () { this.isBack = true window.history.go(-1) } const router = new Router({ routes: [ { path: '/', name: 'PageTransition', component: PageTransition, // 引入頁面切換組件 children: [{ path: '', component: Index // 父路由訪問頁面,例如,訪問www.aaa.com/ 顯示的是Index組件 }, { path: '/pageA', component: PageA // 子路由組件 例如,訪問www.aaa.com/pageA 顯示為PageA }, { path: '/pageB', component: PageB // 子路由組件 例如,訪問www.aaa.com/pageB 顯示為PageB }] } ] })
監(jiān)聽路由變化
在放置 <router-view>的vue文件中
//templete <transition name='transitionName' keep-alive> <router-view></router-view> </transition> //script beforeRouteUpdate(to,from,next){ let isBack = this.$router.isBack; if( isBack ){ this.transitionName = 'slide-right' }else{ this.transitionName = 'slide-left' } this.$router.isBack = false; } //style .slide-left-enter, .slide-right-leave-active { opacity: 0; -webkit-transform: translate(50px, 0); transform: translate(50px, 0); } .slide-left-leave-active, .slide-right-enter { opacity: 0; -webkit-transform: translate(-50px, 0); transform: translate(-50px, 0); }
在需要點擊返回的按鈕中設(shè)置 goback
<div class="left" @click="goback"><</div> methods: { goback () { this.$router.goBack() } }
關(guān)于“vue怎么實現(xiàn)app頁面切換動畫效果”這篇文章就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,使各位可以學到更多知識,如果覺得文章不錯,請把它分享出去讓更多的人看到。
免責聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。