vue?路由切換過渡動(dòng)效滑入滑出效果的實(shí)例代碼
更新時(shí)間：2022年03月29日 10:06:56 作者：想上天與太陽并肩
在支付寶賬單頁面有這樣一個(gè)特效切換過渡動(dòng)效滑入滑出效果，非常方便實(shí)用，那么這個(gè)功能如何實(shí)現(xiàn)的呢？下面小編通過vue實(shí)現(xiàn)路由切換過渡動(dòng)效滑入滑出效果，感興趣的朋友一起看看吧
效果展示
css 滑入和滑出的動(dòng)畫
.twofade-enter {transform: translateX(100%);}
.twofade-enter-active {transition: all 0.3s;position: absolute;height:100%;background:#ececec;}
.twofade-leave-active {transition: all 0;transition-delay: 0.3s;position: absolute;}
.twofade-leave-to {transform: translateX(-100%);}
.threefade-enter {transform: translateX(-100%);}
.threefade-leave-to {transform: translateX(100%);}
.threefade-enter-active {transition: all 0s;position: absolute;z-index: 2;}
.threefade-leave-active {transition: all .3s;position: absolute;z-index: 999;height: 100%;background:#ececec;}transition
使用 vue提供的 transition 標(biāo)簽，data中定義 transitionName 變量
<template>
<div id="app">
<transition :name="transitionName">
<router-view></router-view>
</transition>
</div>
</template>
export default {
name:"App",
data(){
return{
transitionName:""
}
}
}watch 監(jiān)聽路由的變化
通過監(jiān)聽路由的變化 知道是返回還是打開新頁面 在通過在變量 transitionName 賦不同的值改變動(dòng)畫
watch:{
$route(to, from) {
if(to.meta.index > from.meta.index){
this.transitionName = 'twofade';
}else if(to.meta.index < from.meta.index){
this.transitionName = 'threefade';
}
}
}可能遇到的問題
關(guān)于樣式 操作上在切換中可能會(huì)有遇到樣式的問題 需要調(diào)整樣式來達(dá)到自己需要的效果
我的解決方法是
#app{//width: 100%;height: 100%;overflow-x: hidden;position: absolute;
&>div{width: 100%;min-height: 100vh;}
}到此這篇關(guān)于vue 路由切換過渡動(dòng)效 滑入 滑出效果的文章就介紹到這了,更多相關(guān)vue 路由過渡動(dòng)效內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vue實(shí)現(xiàn)路由跳轉(zhuǎn)至外界頁面
這篇文章主要介紹了Vue實(shí)現(xiàn)路由跳轉(zhuǎn)至外界頁面方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-12-12
vue實(shí)現(xiàn)動(dòng)態(tài)進(jìn)度條效果
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)動(dòng)態(tài)進(jìn)度條效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
Vue3的確可以直接使用tsx開發(fā),唯一需要處理的就是children,而且處理起來還是比較不爽的,下面這篇文章主要給大家介紹了關(guān)于TSX常見簡(jiǎn)單入門用法之Vue3+Vite的相關(guān)資料,需要的朋友可以參考下2022-08-08
VUE腳手架框架編寫簡(jiǎn)潔的登錄界面的實(shí)現(xiàn)
本文主要介紹了VUE腳手架框架編寫簡(jiǎn)潔的登錄界面的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08
這篇文章主要介紹了vue中touch和click共存的解決方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-07-07
ant?design?vue?pro?支持多頁簽?zāi)Ｊ絾栴}
這篇文章主要介紹了ant?design?vue?pro?支持多頁簽?zāi)Ｊ絾栴},具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-11-11
Vue中使用this.$set()如何新增數(shù)據(jù),更新視圖
這篇文章主要介紹了Vue中使用this.$set()實(shí)現(xiàn)新增數(shù)據(jù),更新視圖方式。具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-06-06
vue是一種輕巧便捷的框架，那么如何進(jìn)行對(duì)于數(shù)據(jù)加載的刷新呢？以下就是我對(duì)于vue.js數(shù)據(jù)加載的一點(diǎn)想法2017-06-06
淺談Vue render函數(shù)在ElementUi中的應(yīng)用
今天小編就為大家分享一篇淺談Vue render函數(shù)在ElementUi中的應(yīng)用，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-09-09
vue完成項(xiàng)目后,打包成靜態(tài)文件的方法
今天小編就為大家分享一篇vue完成項(xiàng)目后,打包成靜態(tài)文件的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-09-09