快捷導(dǎo)航

vue頁面切換過渡transition效果

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

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

首先得有你想要的過渡效果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);
}

給你想要過渡頁面的父元素給上這樣的樣式：

.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)聽路由去改變是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)然要個路由這是參數(shù)index，分級。

總結(jié)

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

您可能感興趣的文章:

相關(guān)文章

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