vue實現app頁面轉場效果

標籤：function   www.   translate   pos   tran   lock   點擊   routes   切換   

pageAninmate

vue-router實現webApp轉場效果

示範效果

快速整合

1.複製PageTransittion.vue到項目目錄。 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      }]    }  ]})

方案實現記錄頁面狀態

要實現頁面前進後台動畫，首先必須知道頁面狀態（即是頁面是進入下一頁，還是後退），我們可以通過改寫router.go方法記錄回退狀態，頁面如果需要回退時，調用

$router.go(-1)

修改router/index.vue

// 增強原方法，好處是舊的業務模組不需要任何變動Router.prototype.go = function () {  this.isBack = true  window.history.go(-1)}// 或者你可以建立一個方法Router.prototype.goBack = function () {  this.isBack = true  this.go(-1)}

當new Router時，執行個體就包含go/goBack方法。

監聽路由變化

使用嵌套路由的方式引入子頁面，監聽根路由的update鉤子做相應操作。

beforeRouteUpdate (to, from, next) {  // 如果isBack為true時，證明是使用者點擊了回退，執行slide-right動畫   let isBack = this.$router.isBack   if (isBack) {      this.transitionName = ‘slide-right‘   } else {      this.transitionName = ‘slide-left‘   }   // 做完回退動畫後，要設定成前進動畫，否則下次開啟頁面動畫將還是回退   this.$router.isBack = false     next()}

動畫效果

通過transition執行動畫

  <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);}

路由設定

router/index.js

const router = new Router({  routes: [    {      path: ‘/‘,      name: ‘PageTransition‘,      component: PageTransition,      children: [{        // 該路由為父路由的預設路由        path: ‘‘,        component: Index      }, {        path: ‘/pageA‘,        component: PageA      }, {        path: ‘/pageB‘,        component: PageB      }]    }  ]})

本文系轉載：原文地址：http://cnodejs.org/topic/58c792e6688280847800139d

vue實現app頁面轉場效果