這篇文章將為大家詳細(xì)講解有關(guān)vue怎么實(shí)現(xiàn)app頁面切換動(dòng)畫效果，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

堅(jiān)守“ 做人真誠 · 做事靠譜 · 口碑至上 · 高效敬業(yè) ”的價(jià)值觀，專業(yè)網(wǎng)站建設(shè)服務(wù)10余年為成都成都茶樓設(shè)計(jì)小微創(chuàng)業(yè)公司專業(yè)提供企業(yè)網(wǎng)站設(shè)計(jì)營銷網(wǎng)站建設(shè)商城網(wǎng)站建設(shè)手機(jī)網(wǎng)站建設(shè)小程序網(wǎng)站建設(shè)網(wǎng)站改版，從內(nèi)容策劃、視覺設(shè)計(jì)、底層架構(gòu)、網(wǎng)頁布局、功能開發(fā)迭代于一體的高端網(wǎng)站建設(shè)服務(wù)。

vue是什么

Vue是一套用于構(gòu)建用戶界面的漸進(jìn)式JavaScript框架，Vue與其它大型框架的區(qū)別是，使用Vue可以自底向上逐層應(yīng)用，其核心庫只關(guān)注視圖層，方便與第三方庫和項(xiàng)目整合，且使用Vue可以采用單文件組件和Vue生態(tài)系統(tǒng)支持的庫開發(fā)復(fù)雜的單頁應(yīng)用。

因?yàn)樾枰獙?shí)現(xiàn)類似APP頁面切換的動(dòng)畫效果，百度google搜索比較少資料，所以自己寫文檔，希望對(duì)您有用

在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)聽路由變化

在放置 的vue文件中

//templete  

    
  

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

在需要點(diǎn)擊返回的按鈕中設(shè)置 goback

<