vue實現app頁面切換動畫效果執行個體，app頁面切換

vue實現app頁面切換動畫效果執行個體，app頁面切換

因為需要實作類別似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   }]  } ]})

監聽路由變化

在放置 <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);}

在需要點擊返回的按鈕中設定 goback

<div class="left" @click="goback"><</div>methods: {  goback () {   this.$router.goBack()  } }

我自己的github地址 https://github.com/Jaction/page-app-Ainimate

大牛的github地址https://github.com/zhengguorong/pageAinimate

以上就是本文的全部內容，希望對大家的學習有所協助，也希望大家多多支援幫客之家。