怎么在Vue中實現一個頁面跳轉動畫效果

本文章向大家介紹怎么在Vue中實現一個頁面跳轉動畫效果，主要包括怎么在Vue中實現一個頁面跳轉動畫效果的使用實例、應用技巧、基本知識點總結和需要注意事項，具有一定的參考價值，需要的朋友可以參考一下。

為什么要使用Vue

Vue是一款友好的、多用途且高性能的JavaScript框架，使用vue可以創建可維護性和可測試性更強的代碼庫，Vue允許可以將一個網頁分割成可復用的組件，每個組件都包含屬于自己的HTML、CSS、JavaScript，以用來渲染網頁中相應的地方，所以越來越多的前端開發者使用vue。

實現過程

一、vue路由匹配

創建vue實例，匹配路由。

用Vue.js + Vue Router創建單頁應用，是非常簡單的。使用Vue.js，我們可以通過組合組件來組成應用程序，將Vue Router 添加進來之后，我們需要做的是，將組件(components)映射到路由(routes),然后告訴Vue Router 在哪里渲染它們。

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
//如果使用模塊化機制編程，導入Vue和VueRouter，就需要調用Vue.use(Router)

接下來就可以進行路由組件的映射：

(路由)組件的定義可以自行定義，當然，為了踐行模塊化組件化思想，多是從其他文件import進來。以下以簡單的“登錄->主頁->點單->結算”四個頁面的交互為例：

import Login from '@/components/login' 
import Index from '@/components/index' 
import PointList from '@/components/pointList/pointList' 
import SettLement from '@/components/pointList/settlement' 

//創建router實例，然后傳入‘routes'配置
export default new Router({
 //routes配置可以直接傳入，也可以先定義后使用
 //每個路由都應該映射一個組件，其中component可以是通過Vue.extend()創建的組件構造器，
 或者只是一個組件配飾對象。(今天暫時不考慮嵌套路由的情況)
 routes: [
 {
 path: '/', // 登錄
 name: 'Login',
 component: Login
 },
 {
 path: '/index', // 主頁
 name: 'Index',
 component: Index
 },
 {
 path: '/pointList', // 點單
 name: 'PointList',
 component: PointList
 },
 {
 path: '/settLement', // 結算
 name: 'SettLement',
 component: SettLement
 }
]
})

二、路由跳轉 $router

組件路由除了使用全局組件 router-link 來實現點擊跳轉(相當于按鈕)外，還可以使用組件本身具有的一個實例對象$router及其一些屬性來達到目標。 
$router 是VueRouter的一個實例對象，相當于一個全局的路由器對象。在Vue實例內部，你可以通過$router訪問路由實例，里面含有很多屬性和子對象，例如history對象，經常用到的跳轉鏈接就可以調用this.$router.push，this.$router.push會往history棧中添加一個新記錄。

點擊  等同于調用 router.push(...)

(...)該方法的參數可以是一個字符串，或者一個描述地址的對象：

// 字符串
router.push('home')
// 對象
router.push({ path: 'home' })
// 命名的路由
router.push({ name: 'user', params: { userId: 123 }})
// 帶查詢參數，變成 /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})

組件路由跳轉實例：

1.

<router-link :to="{name:'PointList', params: { userId: 123 }}">
 <i class="icon"><img src="../assets/point.png" alt=""></i>
 <span>點單</span>
</router-link>

2.

<footer class="version" @click="goPage('Author')">v 1.0</footer>
//Js：
methods: {
 goPage(url, param) {
 this.$router.push({ name: url });
 }
}

三、vue路由對象$route(只讀)

在使用了vue-router的應用中，路由對象會被注入每個組件中，賦值為this.$route,并且當路由切換時，路由對象會被更新。所以route相當于當前正在跳轉的路由對象，可以從里面獲取name,path,params,query等，即包含了當前URL解析得到的信息，還有URL匹配到的路由記錄。

路由對象暴露了以下屬性(常見)：

1、$route.path

字符串(string)。等于當前路由對象的路徑，會被解析為絕對路徑，
如:http://example.com/#/login?name=aa，this.$route.path
，輸出“/login”，即對應上面1中路由匹配時routes配置中的“path”；

2、$route.name

字符串(string)。有時候，通過一個名稱來標識一個路由顯得更加方便，特別是在鏈接一個路由，或者是執行一些跳轉的時候。同樣，這里的name也對應了routes配置中給某個路由設置名稱的name值：

要鏈接到一個命名路由，可以給router-link的to屬性傳一個對象：

<router-link :to="{name:'Order', params: { userId: 123 }}">
</router-link>

用在調用router.push()中也是一回事：

this.$router.push({ name: 'Order', params: { userId: 123 }})

3、$route.params

對象(object)。路由跳轉攜帶參數：

this.$router.push({ name: 'Order', params: { userId: 123 }})
console.log(this.$route.params.userId); //123

4、$route.query

對象(object)。可訪問攜帶的查詢參數：

this.$router.push({name: 'login', query:{name: 'userName'}});
this.$route.query.name; //you
//此時路由為:http://example.com/#/login?name=userName。

5、$route.redirectedFrom

字符串(string)。重定向來源：

如：{ path: '*',redirect: {name: 'hello'}}
 此時訪問不存在的路由http://example.com/#/a會重定向到hello，
在hello訪問this.$route.redirectedFrom; 輸出“/a”。

6、$route.matched

數組(array)。當前路由下路由聲明的所有信息，從父路由(如果有)到當前路由為止。

7、$route.hash

字符串(string)。當前路徑的hash值。

四、vue監聽$route的方式

watch：{‘$route' (to, from) {}}

route 的變化。watch中監聽的對象默認回調函數中的參數值就是newVal,oldVal。作為 $route 屬性來說當然也就是 to 和 from 的概念了。

Vue用router.push(傳參)跳轉頁面，參數改變，在跳轉后的路由觀察路由變化，進行頁面刷新，可對“from->to”的過程設置動畫效果。

該功能的難點就在于怎樣獲取“上一頁”和“下一頁”,即怎樣分辨是“前進”還是“后退”？

例：

// watch $route 決定使用哪種過渡
watch:{
 '$route' (to, from) {
 //此時假設從index頁面跳轉到pointList頁面
 console.log(to); // "/pointList"
 console.log(from); // “/index”
 const routeDeep = ['/', '/index','/pointList', '/settLement'];
 const toDepth = routeDeep.indexOf(to.path)
 const fromDepth = routeDeep.indexOf(from.path)
 this.transitionName = toDepth > fromDepth ? 'fold-left' : 'fold-right'
 }
 },

to、from是最基本的路由對象，分別表示從(from)某個頁面跳轉到(to)另一個頁面,to.path（表示要跳轉到的路由地址），from.path同理。

定義routeDeep數組，將路由目錄按層級依次排序(暫不考慮嵌套路由的情況)，復雜單頁應用里，同一層級（如同一頁面上的多個導航按鈕）順序隨意，然后依次排列每個導航的下一頁、下下頁…即保證每個“上一頁”在“下一頁”前面。

總結下來就是：按照routeDeep數組里定義的路由目錄的順序，“toDepth > fromDepth”表示“上一頁”跳轉到“下一頁”，同理可由此判斷是“前進”還是“后退”。

五、Vue2.0中transition組件的使用

<transition :name="transitionName">
 <router-view class="view app-view"></router-view>
</transition>

• transition中有name屬性用于替換vue鉤子函數中的類名。

• transition中只能有一個子元素并且該子元素需要有v-show或者v-if來控制是否顯示。

過渡CSS類名

transition中的name屬性用于 替換 vue鉤子函數中的類名transitionName-

• transitionName-enter: 定義進入過渡的開始狀態。在元素被插入時生效，在下一個幀移除。

• transitionName-enter-active: 定義進入過渡的結束狀態。在元素被插入時生效，在transition/animation完成之后移除。

• transitionName-leave:定義離開過渡的開始狀態。在離開過渡被觸發時生效，在下一個幀移除。

• transitionName-leave-active: 定義離開過渡的結束狀態。在離開過渡被觸發時生效，在transition/animation完成之后移除。

this.transitionName = toDepth > fromDepth ? 'fold-left' : 'fold-right'

在“watch $route”中，判斷頁面跳轉的“前進”和“后退”時，決定用不同的過渡效果（fold-left還是fold-right）。

六、animation、transform動畫效果實現

在上一個主題中，判斷頁面跳轉路徑之后，為兩種跳轉的transition設置不同的類名“fold-left”、“fold-right”。
然后在CSS中，為兩種類名設置不同的動畫效果(這里以“左滑動”和“右滑動”為例)：

.fold-left-enter-active {
 animation-name: fold-left-in;
 animation-duration: .3s;
 }
 .fold-left-leave-active {
 animation-name: fold-left-out;
 animation-duration: .3s;
 }
.fold-right-enter-active {
 animation-name: fold-right-in;
 animation-duration: .3s;
 }
 .fold-right-leave-active {
 animation-name: fold-right-out;
 animation-duration: .3s;
 }

animation 屬性是一個簡寫屬性，用于設置六個動畫屬性：

@keyframes fold-left-in {
 0% {
  transform: translate3d(100%, 0, 0);
 }
 100% {
  transform: translate3d(0, 0, 0);
 }
 }
 @keyframes fold-left-out {
 0% {
  transform: translate3d(0, 0, 0);
 }
 100% {
  transform: translate3d(-100%, 0, 0);
 }
 }

根據CSS3 @keyframes規則，創建動畫。創建動畫的原理即將一套CSS樣式逐漸變化為另一套樣式。在動畫過程中，能夠多次改變這套CSS樣式。可以“百分比”來規定改變發生的時間，或者通過關鍵詞“from”和“to”，等價于“0%”(動畫的開始時間)和“100%”(動畫的結束時間)。一般為了獲得最佳的瀏覽器支持，應該始終定義0%和100%選擇器。

transform屬性向元素應用2D或3D轉換。該屬性允許我們對元素進行旋轉、縮放、移動或傾斜。translate3d(x,y,z)定義3D轉換，如transform：translate3d(100%, 0, 0)只改變了x的值，即代表橫向左滑動，同理可相應推出其他情況。

到此這篇關于怎么在Vue中實現一個頁面跳轉動畫效果的文章就介紹到這了，更多相關的內容請搜索億速云以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持億速云！