快捷導(dǎo)航

vue頁(yè)面切換過(guò)渡transition效果

更新時(shí)間：2018年10月08日 11:17:46 作者：Winston-王

這篇文章主要介紹了vue頁(yè)面切換過(guò)渡transition效果，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

首先得有你想要的過(guò)渡效果css代碼：

.vux-pop-out-enter-active,
.vux-pop-out-leave-active,
.vux-pop-in-enter-active,
.vux-pop-in-leave-active {
 will-change: transform;
 transition: all 500ms;
 height: 100%;
 position: absolute;
 backface-visibility: hidden;
 perspective: 1000;
}
.vux-pop-out-enter {
 opacity: 0;
 transform: translate3d(-100%, 0, 0);
}
.vux-pop-out-leave-active {
 opacity: 0;
 transform: translate3d(100%, 0, 0);
}
.vux-pop-in-enter {
 opacity: 0;
 transform: translate3d(100%, 0, 0);
}
.vux-pop-in-leave-active {
 opacity: 0;
 transform: translate3d(-100%, 0, 0);
}

給你想要過(guò)渡頁(yè)面的父元素給上這樣的樣式：

.router-view{
  width: 100%;
  position: absolute;
  -webkit-transition: all .3s cubic-bezier(.55,0,.1,1);
  -moz-transition: all .3s cubic-bezier(.55,0,.1,1);
  -ms-transition: all .3s cubic-bezier(.55,0,.1,1);
  -o-transition: all .3s cubic-bezier(.55,0,.1,1);
  transition: all .3s cubic-bezier(.55,0,.1,1);
  height:100%;
 }

html代碼是這樣的：

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

js代碼是這樣的：

export default {
  name: 'app',
  data(){
   return {
    transitionName:'vux-pop-in'
   }
  },
 }

這里的transitionName根據(jù)自己的需要去改變，我是監(jiān)聽(tīng)路由去改變是vux-pop-in還是vux-pop-out的。

watch:{
  $route(to, from) {
   if(to.meta.index > from.meta.index){
    this.transitionName = 'vux-pop-in';
   }else{
    this.transitionName = 'vux-pop-out';
   }
  }
 }

這里當(dāng)然要個(gè)路由這是參數(shù)index，分級(jí)。

總結(jié)

以上所述是小編給大家介紹的vue頁(yè)面切換過(guò)渡transition效果，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章:

相關(guān)文章

vue中$emit的用法詳解
這篇文章主要介紹了vue中$emit的用法詳解,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2022-08-08
vue兩次賦值頁(yè)面獲取不到的解決
這篇文章主要介紹了vue兩次賦值頁(yè)面獲取不到的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-04-04
vuejs路由的傳參及路由props配置詳解
最近在學(xué)習(xí)vue router的傳參,所以下面這篇文章主要給大家介紹了關(guān)于vuejs路由的傳參及路由props配置的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2022-07-07
解決vue中虛擬dom,無(wú)法實(shí)時(shí)更新的問(wèn)題
今天小編就為大家分享一篇解決vue中虛擬dom,無(wú)法實(shí)時(shí)更新的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-09-09
Vue+Echarts繪制餅圖的示例詳解
這篇文章主要為大家詳細(xì)介紹了如何利用Vue和Echarts實(shí)現(xiàn)繪制餅圖，文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下
2023-03-03
vue3編譯報(bào)錯(cuò)ESLint:defineProps is not defined&nbs
這篇文章主要介紹了vue3編譯報(bào)錯(cuò)ESLint:defineProps is not defined no-undef的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-03-03
Vue中@click.stop和@click.prevent實(shí)例詳解
當(dāng)我們使用Vue.js開(kāi)發(fā)前端應(yīng)用時(shí),經(jīng)常會(huì)在模版中使用@click指令來(lái)響應(yīng)用戶(hù)的點(diǎn)擊事件,這篇文章主要給大家介紹了關(guān)于Vue中@click.stop和@click.prevent的相關(guān)資料,需要的朋友可以參考下
2024-04-04
vue進(jìn)入頁(yè)面加載數(shù)據(jù)緩慢實(shí)現(xiàn)loading提示過(guò)程
這篇文章主要介紹了vue進(jìn)入頁(yè)面加載數(shù)據(jù)緩慢實(shí)現(xiàn)loading提示過(guò)程，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-08-08
vue項(xiàng)目中極驗(yàn)驗(yàn)證的使用代碼示例
這篇文章主要介紹了vue項(xiàng)目中極驗(yàn)驗(yàn)證的使用代碼示例，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-12-12
vue3中reactive和ref的實(shí)現(xiàn)與區(qū)別詳解
reactive和ref都是vue3實(shí)現(xiàn)響應(yīng)式系統(tǒng)的api,他們是如何實(shí)現(xiàn)響應(yīng)式的呢,reactive和ref又有什么區(qū)別呢,下面小編就來(lái)和大家詳細(xì)講講,希望對(duì)大家有所幫助
2023-10-10