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

為文山州等地區(qū)用戶提供了全套網(wǎng)頁設計制作服務，及文山州網(wǎng)站建設行業(yè)解決方案。主營業(yè)務為網(wǎng)站建設、網(wǎng)站設計、文山州網(wǎng)站設計，以傳統(tǒng)方式定制建設網(wǎng)站，并提供域名空間備案等一條龍服務，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠的服務。我們深信只要達到每一位用戶的要求，就會得到認可，從而選擇與我們長期合作。這樣，我們也可以走得更遠！

為什么要使用Vue

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

實現(xiàn)過程

一、vue路由匹配

創(chuàng)建vue實例，匹配路由。

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

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
//如果使用模塊化機制編程，導入Vue和VueRouter，就需要調(diào)用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' 

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

二、路由跳轉(zhuǎn) $router

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

聲明式	編程式
<router-link :to="..."	router.push(...)

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

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

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

組件路由跳轉(zhuǎn)實例：

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相當于當前正在跳轉(zhuǎn)的路由對象，可以從里面獲取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)。有時候，通過一個名稱來標識一個路由顯得更加方便，特別是在鏈接一個路由，或者是執(zhí)行一些跳轉(zhuǎn)的時候。同樣，這里的name也對應了routes配置中給某個路由設置名稱的name值：

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

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

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

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

3、$route.params

對象(object)。路由跳轉(zhuǎn)攜帶參數(shù)：

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

4、$route.query

對象(object)?？稍L問攜帶的查詢參數(shù)：

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

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

7、$route.hash

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

四、vue監(jiān)聽$route的方式

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

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

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

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

例：

// watch $route 決定使用哪種過渡
watch:{
 '$route' (to, from) {
 //此時假設從index頁面跳轉(zhuǎn)到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)某個頁面跳轉(zhuǎn)到(to)另一個頁面,to.path（表示要跳轉(zhuǎn)到的路由地址），from.path同理。

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

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

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

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

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

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

過渡CSS類名

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

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

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

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

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

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

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

六、animation、transform動畫效果實現(xiàn)

在上一個主題中，判斷頁面跳轉(zhuǎn)路徑之后，為兩種跳轉(zhuǎn)的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 屬性是一個簡寫屬性，用于設置六個動畫屬性：

值	描述
animation-name	規(guī)定需要綁定到選擇器的 keyframe 名稱。
animation-duration	規(guī)定完成動畫所花費的時間，以秒或毫秒計。
animation-timing-function	規(guī)定動畫的速度曲線。
animation-delay	規(guī)定在動畫開始之前的延遲。
animation-iteration-count	規(guī)定動畫應該播放的次數(shù)。
animation-direction	規(guī)定是否應該輪流反向播放動畫。

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

根據(jù)CSS3 @keyframes規(guī)則，創(chuàng)建動畫。創(chuàng)建動畫的原理即將一套CSS樣式逐漸變化為另一套樣式。在動畫過程中，能夠多次改變這套CSS樣式?？梢浴鞍俜直取眮硪?guī)定改變發(fā)生的時間，或者通過關鍵詞“from”和“to”，等價于“0%”(動畫的開始時間)和“100%”(動畫的結束時間)。一般為了獲得最佳的瀏覽器支持，應該始終定義0%和100%選擇器。

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

到此這篇關于怎么在Vue中實現(xiàn)一個頁面跳轉(zhuǎn)動畫效果的文章就介紹到這了，更多相關的內(nèi)容請搜索創(chuàng)新互聯(lián)成都網(wǎng)站設計公司以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持創(chuàng)新互聯(lián)成都網(wǎng)站設計公司！

另外有需要云服務器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應用場景需求。

分享文章：怎么在Vue中實現(xiàn)一個頁面跳轉(zhuǎn)動畫效果-創(chuàng)新互聯(lián)
URL標題：http://aaarwkj.com/article30/ppdpo.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供用戶體驗、網(wǎng)站設計公司、靜態(tài)網(wǎng)站、營銷型網(wǎng)站建設、企業(yè)建站、響應式網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)