vue?路由切換過渡動效滑入滑出效果的實例代碼
更新時間：2022年03月29日 10:06:56 作者：想上天與太陽并肩
在支付寶賬單頁面有這樣一個特效切換過渡動效滑入滑出效果，非常方便實用，那么這個功能如何實現的呢？下面小編通過vue實現路由切換過渡動效滑入滑出效果，感興趣的朋友一起看看吧
效果展示
css 滑入和滑出的動畫
.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 標簽，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 賦不同的值改變動畫
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';
}
}
}可能遇到的問題
關于樣式 操作上在切換中可能會有遇到樣式的問題 需要調整樣式來達到自己需要的效果
我的解決方法是
#app{//width: 100%;height: 100%;overflow-x: hidden;position: absolute;
&>div{width: 100%;min-height: 100vh;}
}到此這篇關于vue 路由切換過渡動效 滑入 滑出效果的文章就介紹到這了,更多相關vue 路由過渡動效內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要介紹了Vue實現路由跳轉至外界頁面方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-12-12
這篇文章主要為大家詳細介紹了vue實現動態(tài)進度條效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
Vue3的確可以直接使用tsx開發(fā),唯一需要處理的就是children,而且處理起來還是比較不爽的,下面這篇文章主要給大家介紹了關于TSX常見簡單入門用法之Vue3+Vite的相關資料,需要的朋友可以參考下2022-08-08
本文主要介紹了VUE腳手架框架編寫簡潔的登錄界面的實現，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-08-08
這篇文章主要介紹了vue中touch和click共存的解決方式，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
這篇文章主要介紹了ant?design?vue?pro?支持多頁簽模式問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-11-11
這篇文章主要介紹了Vue中使用this.$set()實現新增數據,更新視圖方式。具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-06-06
vue是一種輕巧便捷的框架，那么如何進行對于數據加載的刷新呢？以下就是我對于vue.js數據加載的一點想法2017-06-06
今天小編就為大家分享一篇淺談Vue render函數在ElementUi中的應用，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
今天小編就為大家分享一篇vue完成項目后,打包成靜態(tài)文件的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09