Vue-router結(jié)合transition實現(xiàn)app前進后退動畫切換效果的實例
更新時間：2017年10月11日 10:16:54 作者：ConfigSzy
下面小編就為大家?guī)硪黄猇ue-router結(jié)合transition實現(xiàn)app前進后退動畫切換效果的實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
一丶首先配置路由并且修改路由配置
路由配置就不講了重點，給VueRoute添加一個goBack方法，用于記錄路由的前進后退狀態(tài)
this.isBack = true VueRouter.prototype.goBack = function () {
this.isBack = true
window.history.go(-1)
}
二丶監(jiān)聽路由變化（在路由變化時判斷此時的路由狀態(tài)是前進還是后退）
<template>
<div>
動態(tài)綁定路由動畫，根據(jù)路由狀態(tài)的不同綁定不同的路由動畫分別為 ：‘slide-left' 和 'slide-right'
<transition :name="transitionName">
<router-view class="Router"></router-view>
</transition>
</div>
</template>
<script>
export default {
data() {
return {
transitionName: 'slide-right' // 默認(rèn)動態(tài)路由變化為slide-right
}
},
watch: {
'$route' (to, from) {
let isBack = this.$router.isBack // 監(jiān)聽路由變化時的狀態(tài)為前進還是后退
if(isBack) {
this.transitionName = 'slide-right'
} else {
this.transitionName = 'slide-left'
}
this.$router.isBack = false
}
}
}
</script>
三丶給前進后退動畫添加不同的動畫效果，具體代碼如下：
<style>
.Router {
position: absolute;
width: 100%;
transition: all .8s ease;
top: 40px;
}
.slide-left-enter,
.slide-right-leave-active {
opacity: 0;
-webkit-transform: translate(100%, 0);
transform: translate(100%, 0);
}
.slide-left-leave-active,
.slide-right-enter {
opacity: 0;
-webkit-transform: translate(-100%, 0);
transform: translate(-100% 0);
}
</style>
四丶路由前進的時候按正常方法走就行了；
五丶后退的時候調(diào)用goBack方法就OK；
以上這篇Vue-router結(jié)合transition實現(xiàn)app前進后退動畫切換效果的實例就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了Element Rate 評分的使用方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07
select的change方法傳遞多個參數(shù)的方法詳解
element-ui中的select,checkbox等組件的change方法的回調(diào)函數(shù)只有當(dāng)前選擇的val,如果想再傳入自定義參數(shù)怎么辦,本文給大家分享select的change方法如何傳遞多個參數(shù),感興趣的朋友一起看看吧2024-02-02
Vue3+vite路由配置優(yōu)化(自動化導(dǎo)入)
這篇文章主要介紹了Vue3+vite路由配置優(yōu)化(自動化導(dǎo)入),需要的朋友可以參考下2023-09-09
vue3中require報錯require is not defined問題及解決
這篇文章主要介紹了vue3中require報錯require is not defined問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-06-06
Vue中watch與watchEffect的區(qū)別詳細(xì)解讀
這篇文章主要介紹了Vue中watch與watchEffect的區(qū)別詳細(xì)解讀,watch函數(shù)與watchEffect函數(shù)都是監(jiān)聽器，在寫法和用法上有一定區(qū)別，是同一功能的兩種不同形態(tài)，底層都是一樣的,需要的朋友可以參考下2023-11-11
這篇文章主要給大家介紹了如何使用Vue2實現(xiàn)簡單的購物車功能,文中有相關(guān)的代碼示例,對我們的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2023-08-08
vue使用css-rcurlyexpected等less報錯問題
這篇文章主要介紹了vue使用css-rcurlyexpected等less報錯問題，具有很的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
解決vue-element-admin安裝依賴npm install報錯問題
這篇文章主要介紹了解決vue-element-admin安裝依賴npm install報錯問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-06-06
這篇文章主要介紹了深入理解vue中slot與slot-scope的具體使用,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-01-01
這篇文章主要介紹了說說Vuex的getters屬性的具體用法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-04-04