在支付寶賬單頁(yè)面有這樣一個(gè)特效切換過(guò)渡動(dòng)效滑入滑出效果，非常方便實(shí)用，那么這個(gè)功能如何實(shí)現(xiàn)的呢？下面小編通過(guò)vue實(shí)現(xiàn)路由切換過(guò)渡動(dòng)效滑入滑出效果，感興趣的朋友一起看看吧

效果展示

css 滑入和滑出的動(dòng)畫(huà)

.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)聽(tīng)路由的變化

通過(guò)監(jiān)聽(tīng)路由的變化知道是返回還是打開(kāi)新頁(yè)面在通過(guò)在變量 transitionName 賦不同的值改變動(dòng)畫(huà)

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';
      }
    }
  }

可能遇到的問(wèn)題

關(guān)于樣式 操作上在切換中可能會(huì)有遇到樣式的問(wèn)題需要調(diào)整樣式來(lái)達(dá)到自己需要的效果
我的解決方法是

#app{//width: 100%;height: 100%;overflow-x: hidden;position: absolute;
  &>div{width: 100%;min-height: 100vh;}
}

到此這篇關(guān)于vue 路由切換過(guò)渡動(dòng)效滑入滑出效果的文章就介紹到這了,更多相關(guān)vue 路由過(guò)渡動(dòng)效內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

Vue實(shí)現(xiàn)路由跳轉(zhuǎn)至外界頁(yè)面
這篇文章主要介紹了Vue實(shí)現(xiàn)路由跳轉(zhuǎn)至外界頁(yè)面方式，具有很好的參考價(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
TSX常見(jiàn)簡(jiǎn)單入門(mén)用法之Vue3+Vite
Vue3的確可以直接使用tsx開(kāi)發(fā),唯一需要處理的就是children,而且處理起來(lái)還是比較不爽的,下面這篇文章主要給大家介紹了關(guān)于TSX常見(jiàn)簡(jiǎn)單入門(mén)用法之Vue3+Vite的相關(guān)資料,需要的朋友可以參考下
2022-08-08
VUE腳手架框架編寫(xiě)簡(jiǎn)潔的登錄界面的實(shí)現(xiàn)
本文主要介紹了VUE腳手架框架編寫(xiě)簡(jiǎn)潔的登錄界面的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2022-08-08
vue中touch和click共存的解決方式
這篇文章主要介紹了vue中touch和click共存的解決方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2020-07-07
ant?design?vue?pro?支持多頁(yè)簽?zāi)Ｊ絾?wèn)題
這篇文章主要介紹了ant?design?vue?pro?支持多頁(yè)簽?zāi)Ｊ絾?wèn)題,具有很好的參考價(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.js加載新的內(nèi)容(實(shí)例代碼)
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ì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-09-09
vue完成項(xiàng)目后,打包成靜態(tài)文件的方法
今天小編就為大家分享一篇vue完成項(xiàng)目后,打包成靜態(tài)文件的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-09-09