vue-router實(shí)現(xiàn)webApp切換頁面動畫效果代碼

更新時間：2017年05月25日 11:34:04 作者：大灰狼的小綿羊哥哥

本篇文章主要介紹了vue實(shí)現(xiàn)app頁面切換效果實(shí)例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

vue-router實(shí)現(xiàn)webApp切換效果

演示效果

快速集成

1.復(fù)制PageTransittion.vue到項(xiàng)目目錄。2.修改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
   }]
  }
 ]
})

方案實(shí)現(xiàn)

記錄頁面狀態(tài)

要實(shí)現(xiàn)頁面前進(jìn)后臺動畫，首先必須知道頁面狀態(tài)（即是頁面是進(jìn)入下一頁，還是后退），我們可以通過改寫router.Go方法記錄回退狀態(tài)，頁面如果需要回退時，調(diào)用

$router.go(-1)

修改router/index.vue

// 增強(qiáng)原方法，好處是舊的業(yè)務(wù)模塊不需要任何變動
Router.prototype.go = function () {
 this.isBack = true
 window.history.go(-1)
}

// 或者你可以新建一個方法
Router.prototype.goBack = function () {
 this.isBack = true
 this.go(-1)
}

當(dāng)new Router時，實(shí)例就包含go/goBack方法。

監(jiān)聽路由變化

使用嵌套路由的方式引入子頁面，監(jiān)聽根路由的update鉤子做相應(yīng)操作。

beforeRouteUpdate (to, from, next) {
 // 如果isBack為true時，證明是用戶點(diǎn)擊了回退，執(zhí)行slide-right動畫
  let isBack = this.$router.isBack
  if (isBack) {
   this.transitionName = 'slide-right'
  } else {
   this.transitionName = 'slide-left'
  }
  // 做完回退動畫后，要設(shè)置成前進(jìn)動畫，否則下次打開頁面動畫將還是回退
  this.$router.isBack = false
   next()
}

動畫效果

通過transition執(zhí)行動畫

 <transition :name="transitionName">
  <router-view class="child-view"></router-view>
 </transition>

css代碼

.child-view {
 position: absolute;
 width:100%;
 transition: all .8s cubic-bezier(.55,0,.1,1);
}
.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è)置

router/index.js

const router = new Router({
 routes: [
  {
   path: '/',
   name: 'PageTransition',
   component: PageTransition,
   children: [{
    // 該路由為父路由的默認(rèn)路由
    path: '',
    component: Index
   }, {
    path: '/pageA',
    component: PageA
   }, {
    path: '/pageB',
    component: PageB
   }]
  }
 ]
})

github地址：https://github.com/zhengguorong/pageAinimate

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: