vue頁面切換項目實現(xiàn)轉(zhuǎn)場動畫的方法

更新時間：2019年11月12日 11:21:20 作者：歲月靜好_不負此生

這篇文章主要介紹了vue頁面切換項目實現(xiàn)轉(zhuǎn)場動畫的方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧

前言

移動端, 使用vue為了良好的用戶體驗, 會需要實現(xiàn)APP形式的切換頁面的左滑和右滑效果

實現(xiàn)原理, vue的過渡 & 動畫

技術棧: vue + vue-router

解決思路

區(qū)分前進和后退的路由

網(wǎng)上搜索的資料, 找到了兩種

監(jiān)聽popstate事件

window.addEventListener('popstate', function (e) {
  // 用來判斷是否是后退, 在判斷后需要在其他地方重置
  router.isBack = true
},false)

在注冊路由的時, 添加 meta對象 ( 路由元信息)中添加索引, 這樣做就需要注意索引的大小(這里使用這一種方式)

{
   path: "/login",
   component: resolve => require(["@/pages/login"], resolve),
   meta: {
    title: "登錄",
    keepAlive: false,
    index: 1
   }
  },
  {
   path: "/forward",
   name: "Forward",
   component: resolve => require(["@/pages/forward"], resolve),
   meta: {
    title: "前進",
    keepAlive: true,
    index: 2
   }
  },

根據(jù)切換方向設置不同的動畫效果(通過給transtion內(nèi)置組件不同的name選項)

方案

路由注冊

 {
   path: "/login",
   component: resolve => require(["@/pages/login"], resolve),
   meta: {
    title: "登錄",
    keepAlive: false, // 用來判斷是否緩存, 當判斷為緩存時, 則路由信息的name和組件的name選項需一致
    index: 1, // 通過比較不同的索引, 來判斷是前進動畫還是后退動畫
   }
  },
  {
   path: "/forward",
   name: "Forward",
   component: resolve => require(["@/pages/forward"], resolve),
   meta: {
    title: "前進",
    keepAlive: true,
    index: 2
   }
  },

在App.vue(根組件)中, 判斷動畫方向

<template>
 <div id="project">
   <!-- 
   <keep-alive>
       <router-view v-if="$route.meta.keepAlive"></router-view>
   </keep-alive>
   <router-view v-if="!$route.meta.keepAlive"></router-view>
   這種情況下, 
   :include: 因為若是使用transition包裹兩個keep-alive, vue會出現(xiàn)報錯
        用兩個transition分別包裹keep-alive, 會讓transition的動畫name出現(xiàn)問題
 --> 
  <transition :name="transitionName">
   <keep-alive :include="cachedViews">
    <router-view :key="1"></router-view>
   </keep-alive>
  </transition>
 </div>
</template>

<script>
export default {
 name: "App",
 data() {
  return {
   transitionName: "slide-right", // 初始過渡動畫方向
   cachedViews: [] // 緩存組件
  };
 },
 components: {},
 created() {},
 watch: {
  $route(to, from) {
   if (to.meta.keepAlive && !this.cachedViews.includes(to.name)) {
    // 將需要緩存的組件信息, 添加進其中, 其中to.name的值應該和匹配組件的name選項一致
    this.cachedViews.push(to.name);
   }
   //如果to索引大于from索引,判斷為前進狀態(tài),反之則為后退狀態(tài)
   if (to.meta.index > from.meta.index) {
    //設置動畫名稱
    this.transitionName = "slide-left";
   } else {
    this.transitionName = "slide-right";
   }
  }
 },
 methods: {}
};
</script>


<style lang="scss" scoped>
.slide-right-enter-active,
.slide-right-leave-active,
.slide-left-enter-active,
.slide-left-leave-active {
 will-change: transform;
 transition: all 0.5s;
 <!-- 
  這個是必須的, 是為了讓頁面脫離文檔流, 不然的話, 后進入的頁面會從頁面底部出來
  這個定位會直接添加到路由匹配的組件根元素上, 所以頁面根組件最好設定其寬度為100vw
 -->
 width: 100vw;
 position: absolute;
}
.slide-right-enter {
 opacity: 0;
 transform: translate3d(-100%, 0, 0);
}
.slide-right-leave-active {
 opacity: 0;
 transform: translate3d(100%, 0, 0);
}
.slide-left-enter {
 opacity: 0;
 transform: translate3d(100%, 0, 0);
}
.slide-left-leave-active {
 opacity: 0;
 transform: translate3d(-100%, 0, 0);
}
</style>

待解決問題