vue頁面切換過渡transition效果

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

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

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

這里當然要個路由這是參數(shù)index，分級。

總結

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

您可能感興趣的文章:

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