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)聽路由去改變是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)文章

node+vue前后端分離實(shí)現(xiàn)登錄時(shí)使用圖片驗(yàn)證碼功能
這篇文章主要介紹了node+vue前后端分離實(shí)現(xiàn)登錄時(shí)使用圖片驗(yàn)證碼,記錄前端使用驗(yàn)證碼登錄的過(guò)程，后端用的是node.js，關(guān)鍵模塊是svg-captcha，結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下
2022-11-11
詳解如何在vue項(xiàng)目中引入elementUI組件
這篇文章主要介紹了詳解如何在vue項(xiàng)目中引入elementUI組件,小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-02-02
vue3中的數(shù)據(jù)劫持的最新實(shí)現(xiàn)方案的proxy示例詳解
Vue3中使用Proxy實(shí)現(xiàn)數(shù)據(jù)劫持,解決了Vue2中數(shù)組和對(duì)象劫持的遺留問(wèn)題,Proxy可以修改某些操作的默認(rèn)行為,通過(guò)get和set方法實(shí)現(xiàn)數(shù)據(jù)的劫持和保護(hù)機(jī)制,感興趣的朋友跟隨小編一起看看吧
2024-11-11
vue.extend與vue.component的區(qū)別和聯(lián)系
這篇文章主要介紹了vue.extend與vue.component的區(qū)別和聯(lián)系，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下
2018-09-09
Vuejs 組件——props數(shù)據(jù)傳遞的實(shí)例代碼
本篇文章主要介紹了Vuejs 組件——props數(shù)據(jù)傳遞的實(shí)例代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下。
2017-03-03
avue實(shí)現(xiàn)自定義搜索欄及清空搜索事件的實(shí)踐
本文主要介紹了avue實(shí)現(xiàn)自定義搜索欄及清空搜索事件的實(shí)踐，主要包括對(duì)搜索欄進(jìn)行自定義，并通過(guò)按鈕實(shí)現(xiàn)折疊搜索欄效果，具有一定的參考價(jià)值，感興趣的可以了解一下
2021-12-12
關(guān)于Vue中this.$set的正確使用
我們?cè)陧?xiàng)目開發(fā)的過(guò)程中，經(jīng)常會(huì)遇到這種情況：為data中的某一個(gè)對(duì)象添加一個(gè)屬性，我們?cè)撊绾谓鉀Q這個(gè)問(wèn)題呢，下面小編給大家?guī)?lái)了Vue中this.$set的正確使用，感興趣的朋友跟隨小編一起看看吧
2022-12-12
一篇文章帶你了解Vue組件的創(chuàng)建和使用
這篇文章主要為大家介紹了Vue組件的創(chuàng)建和使用，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助
2021-12-12
通過(guò)實(shí)例解析chrome如何在mac環(huán)境中安裝vue-devtools插件
這篇文章主要介紹了通過(guò)實(shí)例解析chrome如何在mac環(huán)境中安裝vue-devtools插件,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2020-07-07
Vue新手指南之環(huán)境搭建及入門
vue就是前端上的Java,前端上的C#,有個(gè)前端的虛擬DOM引擎,設(shè)計(jì)理念和Java/C#類似,這篇文章主要給大家介紹了關(guān)于Vue新手指南之環(huán)境搭建及入門的相關(guān)資料,需要的朋友可以參考下
2021-08-08