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

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

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

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, // 引入頁(yè)面切換組件
   children: [{
    path: '',
    component: Index // 父路由訪問頁(yè)面，例如，訪問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)

記錄頁(yè)面狀態(tài)

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

$router.go(-1)

修改router/index.vue

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

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

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

監(jiān)聽路由變化

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

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

動(dòng)畫效果

通過transition執(zhí)行動(dòng)畫

 <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

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

您可能感興趣的文章: