怎么在Vue中實(shí)現(xiàn)一個(gè)頁(yè)面跳轉(zhuǎn)動(dòng)畫效果

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

為什么要使用Vue

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

實(shí)現(xiàn)過(guò)程

一、vue路由匹配

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

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

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

接下來(lái)就可以進(jìn)行路由組件的映射：

(路由)組件的定義可以自行定義，當(dāng)然，為了踐行模塊化組件化思想，多是從其他文件import進(jìn)來(lái)。以下以簡(jiǎn)單的“登錄->主頁(yè)->點(diǎn)單->結(jié)算”四個(gè)頁(yè)面的交互為例：

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

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

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

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

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

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

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

1.

<router-link :to="{name:'PointList', params: { userId: 123 }}">
 <i class="icon"><img src="../assets/point.png" alt=""></i>
 <span>點(diǎn)單</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路由對(duì)象$route(只讀)

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

路由對(duì)象暴露了以下屬性(常見(jiàn))：

1、$route.path

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

2、$route.name

字符串(string)。有時(shí)候，通過(guò)一個(gè)名稱來(lái)標(biāo)識(shí)一個(gè)路由顯得更加方便，特別是在鏈接一個(gè)路由，或者是執(zhí)行一些跳轉(zhuǎn)的時(shí)候。同樣，這里的name也對(duì)應(yīng)了routes配置中給某個(gè)路由設(shè)置名稱的name值：

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

<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

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

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

4、$route.query

對(duì)象(object)。可訪問(wèn)攜帶的查詢參數(shù)：

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

5、$route.redirectedFrom

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

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

6、$route.matched

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

7、$route.hash

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

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

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

route 的變化。watch中監(jiān)聽(tīng)的對(duì)象默認(rèn)回調(diào)函數(shù)中的參數(shù)值就是newVal,oldVal。作為 $route 屬性來(lái)說(shuō)當(dāng)然也就是 to 和 from 的概念了。

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

該功能的難點(diǎn)就在于怎樣獲取“上一頁(yè)”和“下一頁(yè)”,即怎樣分辨是“前進(jìn)”還是“后退”？

例：

// watch $route 決定使用哪種過(guò)渡
watch:{
 '$route' (to, from) {
 //此時(shí)假設(shè)從index頁(yè)面跳轉(zhuǎn)到pointList頁(yè)面
 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是最基本的路由對(duì)象，分別表示從(from)某個(gè)頁(yè)面跳轉(zhuǎn)到(to)另一個(gè)頁(yè)面,to.path（表示要跳轉(zhuǎn)到的路由地址），from.path同理。

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

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

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

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

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

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

過(guò)渡CSS類名

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

• transitionName-enter: 定義進(jìn)入過(guò)渡的開(kāi)始狀態(tài)。在元素被插入時(shí)生效，在下一個(gè)幀移除。

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

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

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

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

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

六、animation、transform動(dòng)畫效果實(shí)現(xiàn)

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

.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 屬性是一個(gè)簡(jiǎn)寫屬性，用于設(shè)置六個(gè)動(dòng)畫屬性：

@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)建動(dòng)畫。創(chuàng)建動(dòng)畫的原理即將一套CSS樣式逐漸變化為另一套樣式。在動(dòng)畫過(guò)程中，能夠多次改變這套CSS樣式?？梢浴鞍俜直取眮?lái)規(guī)定改變發(fā)生的時(shí)間，或者通過(guò)關(guān)鍵詞“from”和“to”，等價(jià)于“0%”(動(dòng)畫的開(kāi)始時(shí)間)和“100%”(動(dòng)畫的結(jié)束時(shí)間)。一般為了獲得最佳的瀏覽器支持，應(yīng)該始終定義0%和100%選擇器。

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

到此這篇關(guān)于怎么在Vue中實(shí)現(xiàn)一個(gè)頁(yè)面跳轉(zhuǎn)動(dòng)畫效果的文章就介紹到這了，更多相關(guān)的內(nèi)容請(qǐng)搜索億速云以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持億速云！